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

NameDescriptionTypeDefault
model-value / v-modelbinding valuestring / number / boolean
value 2.6.0value of the Checkbox when used inside a checkbox-groupstring / number / boolean / object
labellabel of the Checkbox when used inside a checkbox-group. If there's no value, label will act as valuestring / number / boolean / object
true-value 2.6.0value of the Checkbox if it's checkedstring / number
false-value 2.6.0value of the Checkbox if it's not checkedstring / number
true-label deprecatedvalue of the Checkbox if it's checkedstring / number
false-label deprecatedvalue of the Checkbox if it's not checkedstring / number
disabledwhether the Checkbox is disabledbooleanfalse
borderwhether to add a border around Checkboxbooleanfalse
sizesize of the Checkboxenum
namenative 'name' attributestring
checkedif the Checkbox is checkedbooleanfalse
indeterminateSet indeterminate state, only responsible for style controlbooleanfalse
validate-eventwhether to trigger form validationbooleantrue
tabindexinput tabindexstring / number
idinput idstring
controls a11y deprecatedsame as aria-controls, takes effect when indeterminate is truestring
aria-controls a11y 2.7.2same as aria-controls, takes effect when indeterminate is truestring

Checkbox Events

NameDescriptionType
changetriggers when the binding value changesFunction

Checkbox Slots

NameDescription
defaultcustomize default content

CheckboxGroup API

CheckboxGroup Attributes

NameDescriptionTypeDefault
model-value / v-modelbinding valueobject[]
sizesize of checkboxenum
disabledwhether the nesting checkboxes are disabledbooleanfalse
minminimum number of checkbox checkednumber
maxmaximum number of checkbox checkednumber
label a11y deprecatednative aria-label attributestring
aria-label a11y 2.7.2native aria-label attributestring
text-colorfont color when button is activestring#ffffff
fillborder and background color when button is activestring#409eff
tagelement tag of the checkbox groupstringdiv
validate-eventwhether to trigger form validationbooleantrue

CheckboxGroup Events

NameDescriptionType
changetriggers when the binding value changesFunction

CheckboxGroup Slots

NameDescriptionSubtags
defaultcustomize default contentCheckbox / Checkbox-button

CheckboxButton API

CheckboxButton Attributes

NameDescriptionTypeDefault
value 2.6.0value of the checkbox when used inside a checkbox-groupstring / number / boolean / object
labellabel of the checkbox when used inside a checkbox-group. If there's no value, label will act as valuestring / number / boolean / object
true-value 2.6.0value of the checkbox if it's checkedstring / number
false-value 2.6.0value of the checkbox if it's not checkedstring / number
true-label deprecatedvalue of the checkbox if it's checkedstring / number
false-label deprecatedvalue of the checkbox if it's not checkedstring / number
disabledwhether the checkbox is disabledbooleanfalse
namenative 'name' attributestring
checkedif the checkbox is checkedbooleanfalse

CheckboxButton Slots

NameDescription
defaultcustomize default content

Source

ComponentDocs

Contributors