react-toolbox/components/switch/readme.md

30 lines
1.4 KiB
Markdown
Raw Normal View History

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 its 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 -->
```jsx
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.|