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 = {
2015-12-11 21:11:55 +03:00
switch_1: true,
switch_2: false,
switch_3: true
2015-11-12 21:06:56 +03:00
};
2015-12-11 21:11:55 +03:00
handleChange = (field, value) => {
this.setState({...this.state, [field]: value});
2015-11-12 21:06:56 +03:00
};
render () {
return (
< section >
< Switch
2015-12-11 21:11:55 +03:00
checked={this.state.switch_1}
2015-11-12 21:06:56 +03:00
label="Push notifications"
2015-12-11 21:11:55 +03:00
onChange={this.handleChange.bind(this, 'switch_1')}
2015-11-12 21:06:56 +03:00
/>
< Switch
2015-12-11 21:11:55 +03:00
checked={this.state.switch_2}
2015-11-12 21:06:56 +03:00
label="Mail notifications"
2015-12-11 21:11:55 +03:00
onChange={this.handleChange.bind(this, 'switch_2')}
2015-11-12 21:06:56 +03:00
/>
< Switch
2015-12-11 21:11:55 +03:00
checked={this.state.switch_3}
2015-11-12 21:06:56 +03:00
disabled
label="Nothing, thanks"
2015-12-11 21:11:55 +03:00
onChange={this.handleChange.bind(this, 'switch_3')}
2015-11-12 21:06:56 +03:00
/>
< / section >
);
}
}
2015-07-10 09:44:44 +03:00
```
2016-05-30 07:59:44 +03:00
This component can be styled by context providing a theme with the key `RTSwitch` through the theme provider.
2015-07-10 09:44:44 +03:00
## Properties
2016-03-27 01:28:20 +03:00
| Name | Type | Default | Description|
2015-11-01 17:38:12 +03:00
|:-----|:-----|:-----|:-----|
2016-03-27 01:28:20 +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 component's value changes.|
| `onFocus` | `Function` | | Callback function that is fired when the switch is focused.|
2017-01-21 14:47:21 +03:00
| `ripple` | `Boolean` | | If true, the ripple effect will be disabled.|
2016-05-25 01:54:56 +03:00
2016-05-30 07:59:44 +03:00
## Theme
2016-05-25 01:54:56 +03:00
| Name | Description|
|:---------|:-----------|
| `disabled` | Used for the root element if the component is disabled.|
| `field` | Used for the root element if the component is not disabled.|
| `input` | Used for the input element.|
| `off` | Used for a wrapper around the thumb if checked is `false` .|
| `on` | Used for a wrapper around the thumb if checked is `true` .|
| `ripple` | Used for the ripple inside the switch.|
| `text` | Used for the text label element.|
| `thumb` | Used for the thumb element.|