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
const SwitchTest = () => (
< fieldset >
< Switch label = "Push notifications" / >
< Switch checked label = "Mail notifications" / >
< Switch disabled label = "Nothing, thanks" / >
< / fieldset >
);
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.|
| `onBlur` | `Function` | | Callback function that is fired when when the switch is blurred.|
| `onChange` | `Function` | | Callback function that is fired when the components's value changes.|
| `onFocus` | `Function` | | Callback function fire when the switch is focused.|