多状态复选框

多状态复选框用于从给定选项中选择一个状态。

导入#


import { MultiStateCheckbox } from 'primereact/multistatecheckbox';

基本#

多状态复选框用作具有 value 和 onChange 属性以及 option 集合的受控输入。optionValue 字段引用每个选项的值，如果省略，则对象本身成为选项的值。要显示的图标从 optionIcon 属性检索，该属性默认为 icon 属性名称。

公开


<MultiStateCheckbox value={value} onChange={(e) => setValue(e.value)} options={options} optionValue="value" />

无效#

使用 p-invalid 类添加无效状态样式，以指示验证失败。


<MultiStateCheckbox className="p-invalid" />

禁用#

当存在 disabled 时，无法编辑和聚焦该元素。


<MultiStateCheckbox disabled />

可访问性#

屏幕阅读器

多状态复选框组件使用具有 checkbox 角色的元素。用于描述组件的值可以使用 aria-labelledby 或 aria-label 属性提供。组件添加一个具有 aria-live 属性的元素，该元素仅对屏幕阅读器可见，以读取显示的值。要读取的值通过 optionLabel 属性定义，如果未定义，则默认为 optionValue。另一方面，未选中状态标签从 locale API 的 aria 属性的 nullLabel 键检索。这是自定义可访问性实现的示例，因为组件设计和 WCAG 规范之间没有一对一的映射。


<span id="chkbox1">Access Type</span>
<MultiStateCheckbox aria-labelledby="chkbox1" />

<TriStateCheckbox aria-label="Access Type" />

键盘支持

按键	功能
tab	将焦点移动到复选框。
空格键	在值之间切换。