Checkbox

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

Import via Module


import { Checkbox } from 'primereact/checkbox';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>

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="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="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="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);
}

Properties

Any valid attribute is passed to the root element implicitly, extended properties are as follows;

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
inputId	string	null	Unique identifier of the inner native radiobutton.
value	any	null	Value of the checkbox.
name	string	null	Name of the checkbox element .
checked	boolean	false	Specifies whether a checkbox should be checked or not.
trueValue	any	true	Value in checked state.
falseValue	any	false	Value in unchecked state.
style	string	null	Inline style of the element.
className	string	null	Style class of the element.
disabled	boolean	false	When present, it specifies that the element value cannot be altered.
required	boolean	false	When present, it specifies that an input field must be filled out before submitting the form.
readOnly	boolean	false	When present, it specifies that the value cannot be changed.
tabIndex	number	null	Index of the element in tabbing order.
icon	string	pi pi-check	Icon class of the checkbox icon.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.

Events

Name	Parameters	Description
onChange	event.originalEvent: Original event event.value: Value of the checkbox event.checked: Checked state as a boolean.	Callback to invoke on value change
onMouseDown	event: Browser event	Callback to invoke to when a mouse button is pressed.
onContextMenu	event: Browser event	Callback to invoke on right-click.