TriStateCheckbox is an extension to the Checkbox component with an additional state.
import { TriStateCheckbox } from 'primereact/tristatecheckbox';
TriStateCheckbox is used as a controlled input with value and onChange properties.
<TriStateCheckbox value={value} onChange={(e) => setValue(e.value)} />
Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.
<TriStateCheckbox variant="filled" value={value} onChange={(e) => setValue(e.value)} />
Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.
<TriStateCheckbox invalid value={value} onChange={(e) => setValue(e.value)} />
When disabled is present, the element cannot be edited and focused.
<TriStateCheckbox disabled />
TriStateCheckbox component uses an element with checkbox role. Value to describe the component can either be provided with aria-labelledby or aria-label props. Component adds an element witharia-live attribute that is only visible to screen readers to read the value displayed. Values to read are defined with the trueLabel, falseLabel and nullLabel keys of the ariaproperty from the locale API. This is an example of a custom accessibility implementation as there is no one to one mapping between the component design and the WCAG specification.
<span id="chkbox1">Remember Me</span>
<TriStateCheckbox aria-labelledby="chkbox1" />
<TriStateCheckbox aria-label="Remember Me" />
| Key | Function |
|---|---|
| tab | Moves focus to the checkbox. |
| space | Toggles between the values. |
| enter | Toggles between the values. |