Checkbox

Checkbox is an extension to standard checkbox element with theming.

Import #


import Checkbox from 'primevue/checkbox';

Basic #

Binary checkbox is used as a controlled input with v-model and binary properties.


<Checkbox v-model="checked" :binary="true" />

Group #

Multiple checkboxes can be grouped together.

Cheese

Mushroom

Pepper

Onion


<div class="card flex flex-wrap justify-content-center gap-3">
    <div class="flex align-items-center">
        <Checkbox v-model="pizza" inputId="ingredient1" name="pizza" value="Cheese" />
        <label for="ingredient1" class="ml-2"> Cheese </label>
    </div>
    <div class="flex align-items-center">
        <Checkbox v-model="pizza" inputId="ingredient2" name="pizza" value="Mushroom" />
        <label for="ingredient2" class="ml-2"> Mushroom </label>
    </div>
    <div class="flex align-items-center">
        <Checkbox v-model="pizza" inputId="ingredient3" name="pizza" value="Pepper" />
        <label for="ingredient3" class="ml-2"> Pepper </label>
    </div>
    <div class="flex align-items-center">
        <Checkbox v-model="pizza" inputId="ingredient4" name="pizza" value="Onion" />
        <label for="ingredient4" class="ml-2"> Onion </label>
    </div>
</div>

Dynamic #

Checkboxes can be generated using a list of values.

Accounting

Marketing

Production

Research


<div v-for="category of categories" :key="category.key" class="flex align-items-center">
    <Checkbox v-model="selectedCategories" :inputId="category.key" name="category" :value="category.name" />
    <label :for="category.key">{{ category.name }}</label>
</div>

Invalid #

Invalid state is displayed using the invalid prop to indicate a failed validation. You can use this style when integrating with form validation libraries.


<Checkbox v-model="checked" invalid binary />

Filled #

Specify the variant property as filled to display the component with a higher visual emphasis than the default outlined style.


<Checkbox v-model="checked" binary variant="filled" />

Disabled #

When disabled is present, the element cannot be edited and focused.


<Checkbox v-model="checked" disabled />

Accessibility #

Screen Reader

Checkbox component uses a hidden native checkbox element internally that is only visible to screen readers. Value to describe the component can either be provided via label tag combined with inputId prop or using aria-labelledby, aria-label props.


<label for="chkbox1">Remember Me</label>
<Checkbox inputId="chkbox1" />

<span id="chkbox2">Remember Me</span>
<Checkbox aria-labelledby="chkbox2" />

<Checkbox aria-label="Remember Me" />

Keyboard Support

Key	Function
tab	Moves focus to the checkbox.
space	Toggles the checked state.

name	type	default	description
value	any	null	Value of the checkbox.
modelValue	any	null	Value binding of the checkbox.
name	string	null	Name of the input element.
binary	boolean	null	Allows to select a boolean value instead of multiple values.
invalid	boolean	false	When present, it specifies that the component should have invalid state style.
disabled	boolean	null	When present, it specifies that the element should be disabled.
variant	"filled" \| "outlined"	outlined	Specifies the input variant of the component.
readonly	boolean	null	When present, it specifies that an input field is read-only.
required	boolean	null	When present, it specifies that the element is required.
tabindex	number	null	Index of the element in tabbing order.
trueValue	any	null	Value in checked state.
falseValue	any	null	Value in unchecked state.
inputId	string	null	Identifier of the underlying input element.
inputClass	object	null	Style class of the input field.
inputStyle	string \| object	null	Inline style of the input field.
ariaLabelledby	string	null	Establishes relationships between the component and label(s) where its value should be one or more element IDs.
ariaLabel	string	null	Establishes a string value that labels the component.
pt	PassThrough<CheckboxPassThroughOptions	null	Used to pass attributes to DOM elements inside the component.
ptOptions	PassThroughOptions	null	Used to configure passthrough(pt) options of the component.
unstyled	boolean	false	When enabled, it removes component related styles in the core.

name	parameters	returnType	description
update:modelValue	value: any	void	Emitted when the value changes.
change	event: Event	void	Callback to invoke on value change.
focus	event: Event	void	Callback to invoke when the component receives focus.
blur	event: Event	void	Callback to invoke when the component loses focus.

name	type	default	description
instance	any	null	Defines instance.
props	CheckboxProps	null	Defines valid properties.
state	CheckboxState	null	Defines current inline state.
context	CheckboxContext	null	Defines current options.
attrs	any	null	Defines valid attributes.
parent	any	null	Defines parent options.
global	undefined \| object	null	Defines passthrough(pt) options in global config.

name	type	default	description
root	CheckboxPassThroughOptionType	null	Used to pass attributes to the root's DOM element.
input	CheckboxPassThroughOptionType	null	Used to pass attributes to the input's DOM element.
box	CheckboxPassThroughOptionType	null	Used to pass attributes to the box's DOM element.
icon	CheckboxPassThroughOptionType	null	Used to pass attributes to the icon's DOM element.
hooks	ComponentHooks	null	Used to manage all lifecycle hooks.

name	type	default	description
checked	boolean	false	Current checked state of the item as a boolean.
disabled	boolean	false	Current disabled state of the item as a boolean.

Checkbox

Import #

Basic #

Group #

Dynamic #

Invalid #

Filled #

Disabled #

Accessibility #

Screen Reader

Keyboard Support

Checkbox API

Checkbox #

Props #

Emits #

Slots #

Interfaces #

CheckboxPassThroughMethodOptions #

CheckboxPassThroughOptions #

CheckboxPassThroughAttributes #

CheckboxState #

CheckboxContext #

Types #

CheckboxPassThroughOptionType #