Checkbox

WARNING

label act as value has been deprecated, label is used only as display text, this action will be removed in 3.0.0, consider switching to new API.

New API value has been added in 2.6.0, you can use value API to set the value of Checkbox.

A group of options for multiple choices.

Basic usage

Checkbox can be used alone to switch between two states.

Disabled State

Disabled state for checkbox.

Checkbox group

It is used for multiple checkboxes which are bound in one group, and indicates whether one option is selected by checking if it is checked.

Indeterminate

The indeterminate property can help you to achieve a 'check all' effect.

Minimum / Maximum items checked

The min and max properties can help you to limit the number of checked items.

Button style

Checkbox with button styles.

With borders

Checkbox API

Checkbox Attributes

Name	Description	Type	Default
model-value / v-model	binding value	`string` / `number` / `boolean`	—
value 2.6.0	value of the Checkbox when used inside a `checkbox-group`	`string` / `number` / `boolean` / `object`	—
label	label of the Checkbox when used inside a `checkbox-group`. If there's no value, `label` will act as `value`	`string` / `number` / `boolean` / `object`	—
true-value 2.6.0	value of the Checkbox if it's checked	`string` / `number`	—
false-value 2.6.0	value of the Checkbox if it's not checked	`string` / `number`	—
true-label deprecated	value of the Checkbox if it's checked	`string` / `number`	—
false-label deprecated	value of the Checkbox if it's not checked	`string` / `number`	—
disabled	whether the Checkbox is disabled	`boolean`	false
border	whether to add a border around Checkbox	`boolean`	false
size	size of the Checkbox	`enum`	—
name	native 'name' attribute	`string`	—
checked	if the Checkbox is checked	`boolean`	false
indeterminate	Set indeterminate state, only responsible for style control	`boolean`	false
validate-event	whether to trigger form validation	`boolean`	true
tabindex	input tabindex	`string` / `number`	—
id	input id	`string`	—
controls a11y	same as aria-controls, takes effect when `indeterminate` is `true`	`boolean`	—

Checkbox Events

Name	Description	Type
change	triggers when the binding value changes	`Function`

Checkbox Slots

Name	Description
default	customize default content

CheckboxGroup API

CheckboxGroup Attributes

Name	Description	Type	Default
model-value / v-model	binding value	`object`	[]
size	size of checkbox	`enum`	—
disabled	whether the nesting checkboxes are disabled	`boolean`	false
min	minimum number of checkbox checked	`number`	—
max	maximum number of checkbox checked	`number`	—
label	label for screen reader	`string`	—
text-color	font color when button is active	`string`	#ffffff
fill	border and background color when button is active	`string`	#409eff
tag	element tag of the checkbox group	`string`	div
validate-event	whether to trigger form validation	`boolean`	true

CheckboxGroup Events

Name	Description	Type
change	triggers when the binding value changes	`Function`

CheckboxGroup Slots

Name	Description	Subtags
default	customize default content	Checkbox / Checkbox-button

CheckboxButton API

CheckboxButton Attributes

Name	Description	Type	Default
value 2.6.0	value of the checkbox when used inside a `checkbox-group`	`string` / `number` / `boolean` / `object`	—
label	label of the checkbox when used inside a `checkbox-group`. If there's no value, `label` will act as `value`	`string` / `number` / `boolean` / `object`	—
true-value 2.6.0	value of the checkbox if it's checked	`string` / `number`	—
false-value 2.6.0	value of the checkbox if it's not checked	`string` / `number`	—
true-label deprecated	value of the checkbox if it's checked	`string` / `number`	—
false-label deprecated	value of the checkbox if it's not checked	`string` / `number`	—
disabled	whether the checkbox is disabled	`boolean`	false
name	native 'name' attribute	`string`	—
checked	if the checkbox is checked	`boolean`	false