Checkbox

Checkbox is an extension to standard checkbox element with theming.


import { Checkbox } from 'primereact/checkbox';
         

Checkbox is used as a controlled input with checked and onChange properties.


<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
         

Multiple checkboxes can be grouped together.


<div className="flex flex-wrap justify-content-center gap-3">
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient1" name="pizza" value="Cheese" onChange={onIngredientsChange} checked={ingredients.includes('Cheese')} />
        <label htmlFor="ingredient1" className="ml-2">Cheese</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient2" name="pizza" value="Mushroom" onChange={onIngredientsChange} checked={ingredients.includes('Mushroom')} />
        <label htmlFor="ingredient2" className="ml-2">Mushroom</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient3" name="pizza" value="Pepper" onChange={onIngredientsChange} checked={ingredients.includes('Pepper')} />
        <label htmlFor="ingredient3" className="ml-2">Pepper</label>
    </div>
    <div className="flex align-items-center">
        <Checkbox inputId="ingredient4" name="pizza" value="Onion" onChange={onIngredientsChange} checked={ingredients.includes('Onion')} />
        <label htmlFor="ingredient4" className="ml-2">Onion</label>
    </div>
</div>
         

Checkboxes can be generated using a list of values.


{categories.map((category) => {
    return (
        <div key={category.key} className="flex align-items-center">
            <Checkbox inputId={category.key} name="category" value={category} onChange={onCategoryChange} checked={selectedCategories.some((item) => item.key === category.key)} />
            <label htmlFor={category.key} className="ml-2">{category.name}</label>
        </div>
    );
})}
         

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


<Checkbox className="p-invalid"></Checkbox>
         

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


<Checkbox checked disabled></Checkbox>
         
Compatibility with popular React form libraries.

Formik is a popular library for handling forms in React.

I've read and accept the terms & conditions.
 

<Toast ref={toast} />
<Checkbox
    id="checked"
    name="checked"
    checked={formik.values.checked}
    className={classNames({ 'p-invalid': isFormFieldInvalid('checked') })}
    onChange={(e) => {
        formik.setFieldValue('checked', e.checked);
    }}
></Checkbox>
{getFormErrorMessage('checked')}
<Button type="submit" label="Submit" />
 

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

I've read and accept the terms & conditions.
 

<Toast ref={toast} />
<Controller
    name="checked"
    control={control}
    rules={{ required: 'Accept is required.' }}
    render={({ field, fieldState }) => (
        <>
            <label htmlFor={field.name} className={classNames({ 'p-error': errors.checked })}></label>
            <Checkbox inputId={field.name} checked={field.value} inputRef={field.ref} className={classNames({ 'p-invalid mr-1': fieldState.error })} onChange={(e) => field.onChange(e.checked)} />
            {getFormErrorMessage(field.name)}
        </>
         

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

NameElement
p-checkboxContainer element
p-checkbox-boxContainer of icon.
p-checkbox-iconIcon element.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Screen Reader

Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props.


<label htmlFor="chkbox1">Remember Me</label>
<Checkbox inputId="chkbox1" />

<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />

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

Keyboard Support

KeyFunction
tabMoves focus to the checkbox.
spaceToggles the checked state.
Visit the API documentation for detailed information about all the properties, events and methods of the component.