DEV Community

loading...
Cover image for React Checkbox

React Checkbox

primetek profile image PrimeTek ・1 min read

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';
Enter fullscreen mode Exit fullscreen mode

Getting Started

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

<Checkbox onChange={e => setChecked(e.checked)} checked={checked}></Checkbox>
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode
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);
}
Enter fullscreen mode Exit fullscreen mode

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.

Discussion (0)

pic
Editor guide