# Checkbox
### Intro
The multiple selection button is used to select.
### Install
``` ts
import { createApp } from 'vue';
// vue
import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui';
// taro
import { Checkbox,CheckboxGroup,Icon } from '@nutui/nutui-taro';
const app = createApp();
app.use(Checkbox);
app.use(CheckboxGroup);
app.use(Icon);
```
### Basic Usage
:::demo
```html
check box
check box
```
:::
### Semi selective
:::demo
```html
check box
```
:::
### Disabled state
:::demo
```html
Disabled when not selected
Disabled when selected
```
:::
### Custom size
:::demo
```html
Custom size 25
Custom size 10
```
:::
### Custom icon
It is recommended to set the `icon-name` and `icon-active-name` attributes at the same time
:::demo
```html
Custom icon
```
:::
### change Event
When the value changes, the `change` event will be triggered
:::demo
```html
change check box
```
:::
### use checkboxGroup
:::demo
```html
Combined check box
Combined check box
Combined check box
Combined check box
Currently selected value
{{ checkboxgroup1 }}
```
:::
### Checkboxgroup select all / cancel
:::demo
```html
{{item.value}}
Select all
cancel
reverse selection
```
:::
### use checkboxGroup, Limit the maximum number of options (2)
:::demo
```html
Combined check box
Combined check box
Combined check box
Combined check box
selected
{{ checkboxgroup4 }}
```
:::
### Select all / half / cancel
:::demo
```html
selectAll
Combined check box
Combined check box
Combined check box
Combined check box
```
:::
## API
### Checkbox Props
| Attribute | Description | Type | Default
|----- | ----- | ----- | -----
| v-model | If selected | Boolean | `false`
| disabled | Disable selection | Boolean | `false`
| text-position | The position of the text, optional value:`left`,`right` | String | `right`
| icon-size | [Icon Size](#/en-US/icon) | String、Number | `18`
| icon-name | [Icon Name](#/en-US/icon),Before selection (it is suggested to modify it together with `icon-active-name`) | String | `'check-normal'`
| icon-active-name | [Icon Name](#/en-US/icon),After selection (it is suggested to modify it together with `icon-name`) | String | `'checked'`
| icon-indeterminate-name | [Icon Name](#/en-US/icon),Semi selected state | String | `'check-disabled'`
| icon-class-prefix | Custom icon class name prefix, used to use custom icons | String | `nut-icon`
| icon-font-class-name | Basic class name of custom icon font | String | `nutui-iconfont`
| label | Text content of the check box | String | -
| indeterminate | Whether half selection status is currently supported. It is generally used in select all operation | Boolean | `false` |
| shape `v3.3.4` | Shape, optional values:`button`、`round` | String | `round` |
### CheckboxGroup Props
| Attribute | Description | Type | Default
|----- | ----- | ----- | -----
| v-model | Identifier of the currently selected item, corresponding to `label` | Array | -
| disabled | Whether to disable the selection, which will be used for all check boxes under it | Boolean | `false`
| max | Limit the number of choices. It cannot be used with select all / cancel / invert selection. `0 'means there is no limit | Number | `0`
### Checkbox Events
| Event | Description | Arguments
|----- | ----- | -----
| change | Triggered when the value changes | (state, label),`state` represents the current state,`label` indicates the currently selected value
### CheckboxGroup Events
| Event | Description | Arguments
|----- | ----- | -----
| change | Triggered when the value changes | label,`label` returns an array representing the collection of currently selected items
### CheckboxGroup Methods
| methodName | Description | Arguments
|----- | ----- | -----
| toggleAll | Select all / cancel | `f`,`true`,to select all,`false`,cancel the selection
| toggleReverse | Reverse selection | -