复选框

复选框允许用户从一组选项中选择一个或多个。

复选框可以用于打开或关闭一个选项。

如果您在列表中有多个选项，可以使用复选框而不是开关来节省空间。如果您只有一个选项，请避免使用复选框，而使用开关。

基础复选框

<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />

<Checkbox {...label} defaultChecked />
<Checkbox {...label} />
<Checkbox {...label} disabled />
<Checkbox {...label} disabled checked />

按 Enter 键开始编辑

尺寸

使用 size 属性或自定义 svg 图标的字体大小来更改复选框的大小。

<Checkbox {...label} defaultChecked size="small" />
<Checkbox {...label} defaultChecked />
<Checkbox
  {...label}
  defaultChecked
  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
/>

<Checkbox {...label} defaultChecked size="small" />
<Checkbox {...label} defaultChecked />
<Checkbox
  {...label}
  defaultChecked
  sx={{ '& .MuiSvgIcon-root': { fontSize: 28 } }}
/>

按 Enter 键开始编辑

颜色

<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
  {...label}
  defaultChecked
  sx={{
    color: pink[800],
    '&.Mui-checked': {
      color: pink[600],
    },
  }}
/>

<Checkbox {...label} defaultChecked />
<Checkbox {...label} defaultChecked color="secondary" />
<Checkbox {...label} defaultChecked color="success" />
<Checkbox {...label} defaultChecked color="default" />
<Checkbox
  {...label}
  defaultChecked
  sx={{
    color: pink[800],
    '&.Mui-checked': {
      color: pink[600],
    },
  }}
/>

按 Enter 键开始编辑

图标

<Checkbox {...label} icon={<FavoriteBorder />} checkedIcon={<Favorite />} />
<Checkbox
  {...label}
  icon={<BookmarkBorderIcon />}
  checkedIcon={<BookmarkIcon />}
/>

<Checkbox {...label} icon={<FavoriteBorder />} checkedIcon={<Favorite />} />
<Checkbox
  {...label}
  icon={<BookmarkBorderIcon />}
  checkedIcon={<BookmarkIcon />}
/>

按 Enter 键开始编辑

受控

您可以使用 checked 和 onChange 属性控制复选框

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

<Checkbox
  checked={checked}
  onChange={handleChange}
  inputProps={{ 'aria-label': 'controlled' }}
/>

按 Enter 键开始编辑

不确定状态

在表单中，复选框输入只能有两种状态：选中或未选中。它可以提交其值，也可以不提交。但在视觉上，复选框可以有三种状态：选中、未选中或不确定。

您可以使用 indeterminateIcon 属性更改不确定状态图标。

父级

子项 1子项 2

<FormControlLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1}
    />
  }
/>
{children}

<FormControlLabel
  label="Parent"
  control={
    <Checkbox
      checked={checked[0] && checked[1]}
      indeterminate={checked[0] !== checked[1]}
      onChange={handleChange1}
    />
  }
/>
{children}

按 Enter 键开始编辑

FormGroup

FormGroup 是一个有用的包装器，用于组合选择控制组件。

标签位置

您可以更改标签的位置

标签位置

底部尾部

自定义

这是一个自定义组件的示例。您可以在覆盖文档页面中了解更多信息。

<BpCheckbox />
<BpCheckbox defaultChecked />
<BpCheckbox disabled />

<BpCheckbox />
<BpCheckbox defaultChecked />
<BpCheckbox disabled />

按 Enter 键开始编辑

🎨 如果您正在寻找灵感，可以查看 MUI Treasury 的自定义示例。

何时使用

可访问性

(WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)

所有表单控件都应该有标签，包括单选按钮、复选框和开关。在大多数情况下，这是通过使用 <label> 元素 (FormControlLabel) 完成的。
当无法使用标签时，需要直接向输入组件添加属性。在这种情况下，您可以通过 inputProps 属性应用附加属性（例如 aria-label、aria-labelledby、title）。

<Checkbox
  value="checkedA"
  inputProps={{
    'aria-label': 'Checkbox A',
  }}
/>

API

请参阅下面的文档，以获得此处提及的组件的所有属性和类的完整参考。