2015-10-31 21:42:33 +03:00
# Checkbox
[Checkboxes ](https://www.google.com/design/spec/components/selection-controls.html#selection-controls-checkbox ) allow the user to select multiple options from a set. If you have multiple options appearing in a list, you can preserve space by using checkboxes instead of on/off switches. If you have a single option, avoid using a checkbox and use an on/off switch instead.
<!-- example -->
```jsx
2015-11-10 13:07:43 +03:00
import Checkbox from 'react-toolbox/lib/checkbox';
2015-10-31 21:42:33 +03:00
2015-11-08 21:00:25 +03:00
class TestCheckbox extends React.Component {
2015-12-03 03:00:59 +03:00
state = { check1: true, check2: false };
2015-11-08 21:00:25 +03:00
2015-11-25 13:28:36 +03:00
handleChange = (field, value) => {
2015-12-03 03:00:59 +03:00
this.setState({...this.state, [field]: value});
2015-11-08 21:00:25 +03:00
};
render () {
return (
< div >
2015-12-03 03:00:59 +03:00
< Checkbox
checked={this.state.check1}
label="Checked option"
onChange={this.handleChange.bind(this, 'check1')}
2015-11-08 21:00:25 +03:00
/>
2015-12-03 03:00:59 +03:00
< Checkbox
checked={this.state.check2}
label="Unchecked option"
2015-11-08 21:00:25 +03:00
onChange={this.handleChange.bind(this, 'check2')}
/>
2015-12-03 03:00:59 +03:00
< Checkbox
checked
disabled
label="Disabled checkbox"
2015-11-08 21:00:25 +03:00
/>
< / div >
);
2015-12-03 03:00:59 +03:00
}
2015-11-08 21:00:25 +03:00
}
2015-10-31 21:42:33 +03:00
```
## Properties
| Name | Type | Default | Description|
2015-10-31 23:55:12 +03:00
|:-----|:-----|:-----|:-----|
2015-11-08 21:00:25 +03:00
| `checked` | `Bool` | `false` | Value for the checkbox, can be `true` or `false` . |
2015-10-31 23:55:12 +03:00
| `className` | `String` | `''` | Sets a class to give customized styles to the checkbox field.|
| `disabled` | `Bool` | `false` | If true, the checkbox shown as disabled and is not possible to modify it.|
2015-11-08 21:00:25 +03:00
| `label` | `String` | | Text label to attach next to the checkbox element.|
| `name` | `String` | `false` | The name of the field to set in the input checkbox.|
2015-10-31 23:55:12 +03:00
| `onBlur` | `Function` | | Callback called when the checkbox is blurred.|
| `onChange` | `Function` | | Callback called when the checkbox value is changed.|
| `onFocus` | `Function` | | Callback called when the checkbox is focused |
2015-10-31 21:42:33 +03:00
2015-10-31 22:03:49 +03:00
## Methods
2015-11-08 21:00:25 +03:00
This component exposes methods to communicate with the `input` DOM component:
2015-10-31 22:03:49 +03:00
- `blur` to blur the input.
- `focus` to focus the input.