跳转到内容

Checkbox 多选框

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

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

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

简单的多选框

带有 FormControlLabel 的多选框

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

使用表单组(FormGroup)控制多个多选框

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

Assign responsibility

Be careful

Pick two

You can display an error

标签放置

你可以更改标签的位置:

Label Placement

自定义的多选框

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

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

什么时候使用

无障碍设计

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

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