Checkbox 多选框

在一个集合内，用户可以通过多选框组件进行一项或者多项选择。

多选框可以在打开或者关闭一个选项中切换。

若一个列表存在多个选择项时，使用多选框替代开关控件，可以节省空间。 若只存在一个选择项，请避免使用多选框，而改用开关控件。

简单的多选框

带有 FormControlLabel 的多选框

借助 FormControlLabel 组件，多选框组件可以和标签一起使用。

使用表单组（FormGroup）控制多个多选框

FormGroup 会提供相对简单的 API 对选择控件进行分组。

标签放置

你可以更改标签的位置:

自定义的多选框

以下是自定义此组件的一个示例。 您可以在 重写文档页面 中了解更多有关此内容的信息。

🎨 如果您还在寻找灵感，您可以看看 MUI Treasury 特别定制的一些例子。

什么时候使用

• 复选框 对比 单选按钮（Radio Buttons）
• 复选框 对比 Switches（开关控件）

无障碍设计

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox)

• 所有表单控件都应该带有标签，而这包括了单选按钮，复选框和开关。 在大多数情况下，这是通过使用一个 <label> 元素（FormControlLabel）实现的。
• 如果无法使用标签，您则必须在输入组件中直接添加属性。 在这种情况下，您可以经由 inputProps 属性，来附着一些额外的属性（例如 arial-label，aria-labelledby，title）。

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

API

• <Checkbox />
• <FormControl />
• <FormControlLabel />
• <FormGroup />
• <FormLabel />