## Checkbox A group of options for multiple choices. ### Basic usage Checkbox can be used alone to switch between two states. :::demo Define `v-model`(bind variable) in `el-checkbox`. The default value is a `Boolean` for single `checkbox`, and it becomes `true` when selected. Content inside the `el-checkbox` tag will become the description following the button of the checkbox. ```html ``` ::: ### Disabled State Disabled state for checkbox. ::: demo Set the `disabled` attribute. ```html ``` ::: ### 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. :::demo `checkbox-group` element can manage multiple checkboxes in one group by using `v-model` which is bound as an `Array`. Inside the `el-checkbox` element, `label` 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. `label` also corresponds with the element values in the array. It is selected if the specified value exists in the array, and vice versa. ```html ``` ::: ### Indeterminate The `indeterminate` property can help you to achieve a 'check all' effect. :::demo ```html ``` ::: ### Minimum / Maximum items checked The `min` and `max` properties can help you to limit the number of checked items. :::demo ```html ``` ::: ### Button style Checkbox with button styles. :::demo You just need to change `` element into `` element. We also provide `size` attribute for these buttons: `large` and `small`. ```html ``` ::: ### Checkbox Attributes | Attribute | Description | Type | Options | Default| |---------- |-------- |---------- |------------- |-------- | | label | value of the checkbox when used inside a `checkbox-group` | string | — | — | | 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 | — | — | | name | native 'name' attribute | string | — | — | | disabled | if the checkbox is disabled | boolean | — | false | | checked | if the checkbox is checked | boolean | — | false | | indeterminate | same as `indeterminate` in native checkbox | boolean | — | false | ### Checkbox-group Attributes | Attribute | Description | Type | Options | Default| |---------- |-------- |---------- |------------- |-------- | |size | the size of checkbox buttons | string | large/small | — |fill | border and background color when button is active | string | — | #20a0ff | |text-color | font color when button is active | string | — | #ffffff | | min | minimum number of checkbox checked | number | — | — | | max | maximum number of checkbox checked | number | — | — | ### Checkbox Events | Event Name | Description | Parameters | |---------- |-------- |---------- | | change | triggers when the binding value changes | Event object |