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.
Discussion (0)