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 Attributes

AttributeDescriptionTypeAccepted ValuesDefault
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 Checkboxstringmedium / small / mini
namenative 'name' attributestring
checkedif the Checkbox is checkedbooleanfalse
indeterminatesame as indeterminate in native checkboxbooleanfalse

Checkbox Events

Event NameDescriptionParameters
changetriggers when the binding value changesthe updated value

Checkbox Slots

NameDescription
customize default content

Checkbox-group Attributes

AttributeDescriptionTypeAccepted ValuesDefault
model-value / v-modelbinding valuearray
sizesize of checkboxstringmedium / small / mini
disabledwhether the nesting checkboxes are disabledbooleanfalse
minminimum number of checkbox checkednumber
maxmaximum number of checkbox checkednumber
text-colorfont color when button is activestring#ffffff
fillborder and background color when button is activestring#409EFF

Checkbox-group Events

Event NameDescriptionParameters
changetriggers when the binding value changesthe updated value

Checkbox-group Slots

NameDescriptionSubtags
-customize default contentCheckbox / Checkbox-button

Checkbox-button Attributes

AttributeDescriptionTypeAccepted ValuesDefault
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

Checkbox-button Slots

NameDescription
customize default content