Source: https://primereact.org/multistatecheckbox/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

MultiStateCheckbox

MultiStateCheckbox is used to select a state from given options.

Import#

import { MultiStateCheckbox } from 'primereact/multistatecheckbox';

Copy

Basic#

MultiStateCheckbox is used as a controlled input with value and onChange properties along with the option collection. The optionValue field refers to the value of each option, if ommitted the object itself becomes the value of an option. The icon to display is retrieved from the optionIcon property that defaults to icon property name.

public

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

Copy

Invalid#

Invalid state style is added using the p-invalid class to indicate a failed validation.

<MultiStateCheckbox className="p-invalid" />

Copy

Disabled#

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

<MultiStateCheckbox disabled />

Copy

Accessibility#

Screen Reader

MultiStateCheckbox 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 optionLabel property that defaults to optionValue if not defined. Unchecked state label on the other hand is retrieved from nullLabel key 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">Access Type</span>
<MultiStateCheckbox aria-labelledby="chkbox1" />

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

Copy

Keyboard Support

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

Import
Basic
Invalid
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek