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
| Attribute | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| model-value / v-model | binding value | string / number / boolean | — | — |
| label | value of the Checkbox when used inside a checkbox-group | string / number / boolean / object | — | — |
| true-label | value of the Checkbox if it's checked | string / number | — | — |
| false-label | 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 | 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 |
Checkbox Events
| Event Name | Description | Parameters |
|---|---|---|
| change | triggers when the binding value changes | the updated value |
Checkbox Slots
| Name | Description |
|---|---|
| — | customize default content |
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 | — | — |
| text-color | font color when button is active | string | — | #ffffff |
| fill | border and background color when button is active | string | — | #409EFF |
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 |
|---|---|---|---|---|
| label | value of the checkbox when used inside a checkbox-group | string / number / boolean / object | — | — |
| true-label | value of the checkbox if it's checked | string / number | — | — |
| false-label | 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 |