Source: https://primereact.org/tristatecheckbox/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

TriStateCheckbox

TriStateCheckbox is an extension to the Checkbox component with an additional state.

Import#

import { TriStateCheckbox } from 'primereact/tristatecheckbox';

Copy

Basic#

TriStateCheckbox is used as a controlled input with value and onChange properties.

Not Selected

null

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

Copy

Filled#

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.

Not Selected

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

Copy

Invalid#

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.

Not Selected

null

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

Copy

Disabled#

When disabled is present, the element cannot be edited and focused.

Not Selected

<TriStateCheckbox disabled />

Copy

Accessibility#

Screen Reader

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 with_aria-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 _aria_property 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" />

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the checkbox. | | space | Toggles between the values. | | enter | Toggles between the values. |

Import
Basic
Filled
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek