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.

checkbox-group element can manage multiple checkboxes in one group by using v-model which is bound as an Array. Inside the b-checkbox element, value is the value of the checkbox. If no content is nested in that tag, label will be rendered as the description following the button of the checkbox. value also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa.

Indeterminate

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

Min / Max

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

Button Style

Checkbox with button styles.

You just need to change b-checkbox element into b-checkbox-button element. We also provide size attribute.

With icon

The icon attribute adds a icon to Checkboxes.

Checkbox Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	string / number / boolean	—	—
value	value of the Checkbox when used inside a checkbox-group	string / number / boolean / object	—	—
true-value	value of the Checkbox if it's checked	string / number	—	—
false-value	value of the Checkbox if it's not checked	string / number	—	—
disabled	whether the Checkbox is disabled	boolean	—	false
icon	whether to add a icon to the Checkbox	boolean	—	false
size	size of the Checkbox	string	large / default /small	—
name	native 'name' attribute	string	—	—
checked	if the Checkbox is checked	boolean	—	false
indeterminate	same as indeterminate in native checkbox	boolean	—	false
validate-event	whether to trigger form validation	boolean	-	true

Checkbox Events

Event Name	Description	Parameters
change	triggers when the binding value changes	the updated value

Checkbox Slots

Name	Description
—	customize default content
icon	customize icon
sub	customize substitution

Checkbox-Group Attributes

Attribute	Description	Type	Accepted Values	Default
model-value / v-model	binding value	array	—	[]
size	size of checkbox	string	large / default /small	—
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	—	—
validate-event	whether to trigger form validation	boolean	-	true

Checkbox-Group Events

Event Name	Description	Parameters
change	triggers when the binding value changes	the updated value

Checkbox-Group Slots

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

Checkbox-Button Attributes

Attribute	Description	Type	Accepted Values	Default
value	value of the checkbox when used inside a checkbox-group	string / number / boolean / object	—	—
true-value	value of the checkbox if it's checked	string / number	—	—
false-value	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

Checkbox-Button Slots

Name	Description
—	customize default content
icon	customize icon