复选框

允许用户在选中和未选中之间切换的控件。

import React from 'react';
import * as Checkbox from '@radix-ui/react-checkbox';
import { CheckIcon } from '@radix-ui/react-icons';
import './styles.css';

const CheckboxDemo = () => (
  <form>
    <div style={{ display: 'flex', alignItems: 'center' }}>
      <Checkbox.Root className="CheckboxRoot" defaultChecked id="c1">
        <Checkbox.Indicator className="CheckboxIndicator">
          <CheckIcon />
        </Checkbox.Indicator>
      </Checkbox.Root>
      <label className="Label" htmlFor="c1">
        Accept terms and conditions.
      </label>
    </div>
  </form>
);

export default CheckboxDemo;

功能

支持不确定状态。

完整的键盘导航。

可以是受控或不受控的。

安装

从命令行安装组件。

npm install @radix-ui/react-checkbox

结构

导入所有部分并将它们组合在一起。

import * as Checkbox from '@radix-ui/react-checkbox';

export default () => (
  <Checkbox.Root>
    <Checkbox.Indicator />
  </Checkbox.Root>
);

API 参考

根

包含复选框的所有部分。一个 input 当在 form 中使用时也会渲染，以确保事件正确传播。

属性	类型	默认值
`asChild`	`boolean`	`false`
`defaultChecked`	`boolean \| 'indeterminate'`	无默认值
`checked`	`boolean \| 'indeterminate'`	无默认值
`onCheckedChange`	`function`	无默认值
`disabled`	`boolean`	无默认值
`required`	`boolean`	无默认值
`name`	`string`	无默认值
`value`	`string`	`on`

数据属性	值
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-disabled]`	禁用时存在

指示器

当复选框处于选中或不确定状态时渲染。你可以直接设置该元素的样式，或者将其用作包装器，将图标放入其中，或者两者兼而有之。

属性	类型	默认值
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	无默认值

数据属性	值
`[data-state]`	`"checked" \|"unchecked" \|"indeterminate"`
`[data-disabled]`	禁用时存在

示例

不确定

你可以通过控制其状态来将复选框设置为 indeterminate。

import { DividerHorizontalIcon, CheckIcon } from '@radix-ui/react-icons';
import * as Checkbox from '@radix-ui/react-checkbox';

export default () => {
  const [checked, setChecked] = React.useState('indeterminate');

  return (
    <>
      <StyledCheckbox checked={checked} onCheckedChange={setChecked}>
        <Checkbox.Indicator>
          {checked === 'indeterminate' && <DividerHorizontalIcon />}
          {checked === true && <CheckIcon />}
        </Checkbox.Indicator>
      </StyledCheckbox>

      <button
        type="button"
        onClick={() =>
          setChecked((prevIsChecked) =>
            prevIsChecked === 'indeterminate' ? false : 'indeterminate'
          )
        }
      >
        Toggle indeterminate
      </button>
    </>
  );
};