三态复选框

三态复选框是复选框组件的扩展，具有额外的状态。

导入#


import { TriStateCheckbox } from 'primereact/tristatecheckbox';

基本用法#

三态复选框用作受控输入，具有 value 和 onChange 属性。

未选择

null


<TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />

填充#

将 variant 属性指定为 filled，以显示比默认 outlined 样式具有更高视觉强调的组件。

未选择


<TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />

无效#

使用 invalid 属性显示无效状态，以指示验证失败。在与表单验证库集成时，可以使用此样式。

未选择

null


<TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />

禁用#

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

未选择


<TriStateCheckbox disabled />

辅助功能#

屏幕阅读器

三态复选框组件使用带有 checkbox 角色的元素。可以使用 aria-labelledby 或 aria-label 属性提供描述组件的值。组件添加一个带有aria-live 属性的元素，该属性仅对屏幕阅读器可见，以读取显示的值。要读取的值通过 locale API 的 aria 属性的 trueLabel、falseLabel 和 nullLabel 键定义。这是自定义辅助功能实现的一个示例，因为组件设计与 WCAG 规范之间没有一对一的映射。


<span id="chkbox1">Remember Me</span>
<TriStateCheckbox aria-labelledby="chkbox1" />

<TriStateCheckbox aria-label="Remember Me" />

键盘支持

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