2.3 KiB
2.3 KiB
Checkbox
Checkboxes 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.
import Checkbox from 'react-toolbox/lib/checkbox';
class TestCheckbox extends React.Component {
state = {
check1: true,
check2: false
};
handleChange = (field) => {
const newState = {};
newState[field] = !this.state[field];
this.setState(newState);
};
render () {
return (
<div>
<Checkbox
checked={this.state.check1}
label="Checked option"
onChange={this.handleChange.bind(this, 'check1')}
/>
<Checkbox
checked={this.state.check2}
label="Unchecked option"
onChange={this.handleChange.bind(this, 'check2')}
/>
<Checkbox
checked
disabled
label="Disabled checkbox"
/>
</div>
);
}
}
Properties
Name | Type | Default | Description |
---|---|---|---|
checked |
Bool |
false |
Value for the checkbox, can be true or false . |
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. |
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. |
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 |
Methods
This component exposes methods to communicate with the input
DOM component:
blur
to blur the input.focus
to focus the input.