MultiStateCheckbox

MultiStateCheckbox is used to select a state from given multiple states.

public

Import via Module


import { MultiStateCheckbox } from 'primereact/multistatecheckbox';

Import via CDN


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

Getting Started

MultiStateCheckbox is used as a controlled input with value, options and onChange properties. The optionValue field refers to the value of each option.


const [value, setValue] = useState('public');
const options = [
    { value: 'public', icon: 'pi pi-globe' },
    { value: 'protected', icon: 'pi pi-lock-open' },
    { value: 'private', icon: 'pi pi-lock' }
];


<MultiStateCheckbox value={value} options={options} onChange={(e) => setValue(e.value)} optionValue="value" />

Icons

Icon of each option is defined with the icon property of an option object. For templating use iconTemplate to render custom content inside the checkbox.

Option

Name	Type	Default	Description
icon	string	null	The icon of the option. This is optional. The iconTemplate property can be used instead.
style	object	null	Inline style of the checkbox element when the option is selected.
className	string	null	Style class of the checkbox element when the option is selected.

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.
value	any	null	Value of the MultiStateCheckbox.
options	array	null	An array to display as the available options.
optionValue	string	null	Property name to use as the value of an option, defaults to the option itself when not defined.
optionLabel	string	null	Property name to refer to the option label, used by screen readers only. Defaults to optionValue.
iconTemplate	any	null	Template of icon for the selected option.
dataKey	string	null	A property to uniquely match the value in options for better performance.
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.
readOnly	boolean	false	When present, it specifies that the value cannot be changed.
tabIndex	number	null	Index of the element in tabbing order.
empty	boolean	true	If false, the empty state is skipped in the chekbox.
tooltip	any	null	Content of the tooltip.
tooltipOptions	object	null	Configuration of the tooltip, refer to the tooltip documentation for more information.