React Checkbox

React Checkbox is an extension to standard checkbox element with skinning capabilities.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import {Checkbox} from 'primereact/checkbox';

Getting Started

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

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

Multiple Values

Multiple checkboxes can be grouped using a list of values.

<div className="p-col-12">
    <Checkbox inputId="cb1" value="New York" onChange={onCityChange} checked={cities.includes('New York')}></Checkbox>
    <label htmlFor="cb1" className="p-checkbox-label">New York</label>
</div>
<div className="p-col-12">
    <Checkbox inputId="cb2" value="San Francisco" onChange={onCityChange} checked={cities.includes('San Francisco')}></Checkbox>
    <label htmlFor="cb2" className="p-checkbox-label">San Francisco</label>
</div>
<div className="p-col-12">
    <Checkbox inputId="cb3" value="Los Angeles" onChange={onCityChange} checked={cities.includes('Los Angeles')}></Checkbox>
    <label htmlFor="cb3" className="p-checkbox-label">Los Angeles</label>
</div>

const [cities, setCities] = useState([]);

const onCityChange = (e) => {
    let selectedCities = [...cities];
    if(e.checked)
        selectedCities.push(e.value);
    else
        selectedCities.splice(selectedCities.indexOf(e.value), 1);

    setCities(selectedCities);
}

Theming

Checkbox supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Checkbox showcase for demos and documentation.