2015-07-10 09:44:44 +03:00
# Switch
2015-11-01 17:38:12 +03:00
On/off switches toggle the state of a single settings option. The option that the switch controls, as well as the state it’ s in, should be made clear from the corresponding inline label. Switches take on the same visual properties of the radio button.
2015-07-10 09:44:44 +03:00
2015-11-01 17:38:12 +03:00
<!-- example -->
2015-11-01 18:18:35 +03:00
```jsx
2015-11-10 13:07:43 +03:00
import Switch from 'react-toolbox/lib/switch';
2015-11-01 17:38:12 +03:00
2015-11-12 21:06:56 +03:00
class SwitchTest extends React.Component {
state = {
switch: [true, false, false]
};
handleChange = (index) => {
const state = this.state.switch;
state[index] = !state[index];
this.setState({switch: state});
};
render () {
return (
< section >
< Switch
checked={this.state.switch[0]}
label="Push notifications"
onChange={this.handleChange.bind(this, 0)}
/>
< Switch
checked={this.state.switch[1]}
label="Mail notifications"
onChange={this.handleChange.bind(this, 1)}
/>
< Switch
checked={this.state.switch[2]}
disabled
label="Nothing, thanks"
onChange={this.handleChange.bind(this, 2)}
/>
< / section >
);
}
}
2015-07-10 09:44:44 +03:00
```
## Properties
| Name | Type | Default | Description|
2015-11-01 17:38:12 +03:00
|:-----|:-----|:-----|:-----|
| `checked` | `Boolean` | `false` | If true, the switch will be enabled.|
| `className` | `String` | `''` | Sets a class to give custom styles to the switch.|
| `disabled` | `Boolean` | `false` | If true, component will be disabled.|
| `label` | `String` | | The text string to use for the floating label element.|
| `name` | `String` | | The text string used as name of the input.|
2015-11-12 21:06:56 +03:00
| `onBlur` | `Function` | | Callback function that is fired when when the switch is blurred.|
2015-11-01 17:38:12 +03:00
| `onChange` | `Function` | | Callback function that is fired when the components's value changes.|
2015-11-12 21:06:56 +03:00
| `onFocus` | `Function` | | Callback function fire when the switch is focused.|