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
labelvalue of the Checkbox when used inside a checkbox-groupstring / number / boolean / object
true-labelvalue of the Checkbox if it's checkedstring / number
false-labelvalue 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 a11ysame as aria-controls, takes effect when indeterminate is trueboolean

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
labellabel for screen readerstring
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
labelvalue of the checkbox when used inside a checkbox-groupstring / number / boolean / object
true-labelvalue of the checkbox if it's checkedstring / number
false-labelvalue 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