## Checkbox
### Install
``` javascript
import { Checkbox, CheckboxGroup } from 'vant';
Vue.component(Checkbox.name, Checkbox);
Vue.component(CheckboxGroup.name, CheckboxGroup);
```
### Usage
#### Basic Usage
:::demo Basic Usage
```html
Checkbox 1
```
```javascript
export default {
data() {
return {
checkbox1: true
};
}
};
```
:::
#### Disabled
:::demo Disabled
```html
Checkbox 2
```
:::
#### CheckboxGroup
When Checkboxes are inside a CheckboxGroup, the checked checkboxes's name is an array and bound with CheckboxGroup by v-model.
:::demo CheckboxGroup
```html
Checkbox {{ item }}
```
```javascript
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
},
watch: {
result(val) {
console.log(val);
}
}
};
```
:::
#### Inside a Cell
:::demo Inside a Cell
```html
Checkbox{{ item }}
```
```javascript
export default {
data() {
return {
list: ['a', 'b', 'c'],
result: ['a', 'b']
};
}
};
```
:::
### Checkbox API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| name | Checkbox name | `Boolean` | `false` | - |
| disabled | Diable checkbox | `Boolean` | `false` | - |
| shape | Checkbox shape | `String` | `round` | `square` |
### CheckboxGroup API
| Attribute | Description | Type | Default | Accepted Values |
|-----------|-----------|-----------|-------------|-------------|
| disabled | Disable all checkboxes | `Boolean` | `false` | - |
### Checkbox Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| change | Triggered when value changed | current value |
### CheckboxGroup Event
| Event | Description | Parameters |
|-----------|-----------|-----------|
| change | Triggered when value changed | current value |