MultiStateCheckbox

MultiStateCheckbox is used to select a state from given multiple states.

Import#


import { MultiStateCheckbox } from 'primereact/multistatecheckbox';

Basic#

MultiStateCheckbox is used as a controlled input with value, options and onChange properties. The optionValue field refers to the value of each option.

public


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

Disabled#

With disabled it specifies that the element value cannot be altered.

public


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

Invalid#

Applying p-invalid class to an input element indicates a failed validation.


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

Form#

Compatibility with popular React form libraries.

Formik#

Formik is a popular library for handling forms in React.


<label htmlFor="item" className={classNames('mr-2', { 'p-error': formik.errors.item })}>Level</label>
<MultiStateCheckbox id="item" name="item" value={formik.values.item} onChange={(e) => { formik.setFieldValue('item', e.value) }} options={options} optionValue="value" className={classNames({ 'p-invalid': formik.errors.item })} />
{getFormErrorMessage('item')}
<Button label="Submit" type="submit" icon="pi pi-check" />

Hook Form#

React Hook Form is another popular React library to handle forms.


<Controller name="value"  control={form.control} rules={{ required: 'Level is required.'}}
    render={({ field, fieldState }) => (
        <>
            <label htmlFor={field.name} className={classNames({ 'p-error': errors.name })}>Level*</label>
            <MultiStateCheckbox id={field.name} value={field.value} onChange={field.onChange} ref={field.ref} options={options} optionValue="value" className={classNames({ 'p-invalid': fieldState.error })} />
            {getFormErrorMessage(field.name)}
        </>
    )}
/>

Style#

Following is the list of structural style classes, for theming classes visit theming page.

Name	Element
p-chkbox	Container element
p-multistatechkbox	Container element
p-chkbox-box	Container of icon.
p-chkbox-icon	Icon element.

Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

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 witharia-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" />

Keyboard Support

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

API#

Visit the API documentation for detailed information about all the properties, events and methods of the component.

MultiStateCheckbox