Source: https://primereact.org/checkbox/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Checkbox

Checkbox is an extension to standard checkbox element with theming.

Import#

import { Checkbox } from 'primereact/checkbox';

Copy

Basic#

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

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

Copy

Group#

Multiple checkboxes can be grouped together.

Cheese

Mushroom

Pepper

Onion

<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>

Copy

Dynamic#

Checkboxes can be generated using a list of values.

Accounting

Marketing

Production

Research

{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>
    );
})}

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.

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

Copy

Filled#

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

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

Copy

Disabled#

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

<Checkbox checked disabled></Checkbox>

Copy

Accessibility#

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

Copy

Keyboard Support

| Key | Function | | --- | --- | | tab | Moves focus to the checkbox. | | space | Toggles the checked state. |

Import
Basic
Group
Dynamic
Invalid
Filled
Disabled
Accessibility

PrimeReact 10.9.7 by PrimeTek