Package Exports
- react-switch
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-switch) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
react-switch
A draggable, customizable and accessible toggle-switch component for React.


Demo
Installation
npm install react-switch --save
Usage
import React, { Component } from 'react';
import Switch from 'react-switch';
class SwitchExample extends Component {
constructor() {
super();
this.state = { checked: false };
this.handleChange = this.handleChange.bind(this);
}
handleChange(checked) {
this.setState({ checked });
}
render() {
return (
<div>
<label htmlFor="example-switch">Look, an example switch!</label>
<Switch
onChange={this.handleChange}
checked={this.state.checked}
id="example-switch"
/>
</div>
);
}
}
API
Prop | Type | Default | Description |
---|---|---|---|
checked | bool | Required | If true, the switch is set to checked. If false, it is not checked. |
onChange | func | Required | Invoked when the user clicks or drags the switch. It is passed one argument, checked, which is a boolean that describes the presumed future state of the checked prop. |
disabled | bool | false | When disabled, the switch will no longer be interactive and its colors will be greyed out. |
offColor | string | '#888' | The switch will take on this color when it is not checked |
onColor | string | '#080' | The switch will take on this color when it is checked. |
offHandleColor | string | '#fff' | The handle of the switch will take on this color when it is not checked. |
onHandleColor | string | '#fff' | The handle of the switch will take on this color when it is checked. |
handleDiameter | number | null | The diameter of the handle, measured in pixels. By default it will be slightly smaller than the height of the switch. |
uncheckedIcon | element or bool | Default value | An icon that will be shown on the switch when it is not checked. Pass in false if you don't want any icon. |
checkedIcon | element or bool | Default value | An icon that will be shown on the switch when it is checked. Pass in false if you don't want any icon. |
boxShadow | string | null | The default box-shadow of the handle. You can read up on the box-shadow syntax on MDN. |
activeBoxShadow | string | '0px 0px 2px 3px #33bbff' | The box-shadow of the handle when it is active or focused. Do not set this to null, since it is important for accessibility. |
height | number | 28 | The height of the background of the switch, measured in pixels. |
width | number | 56 | The width of the background of the switch, measured in pixels. |
className | string | null | Set as the className of the outer shell of the switch. Useful for positioning the switch. |
id | string | null | Set as an attribute to the embedded checkbox. This is useful for the associated label, which can point to the id in its htmlFor attribute. |
aria-labelledby | string | null | Set as an attribute of the embedded checkbox. This should be the same as the id of a label. You should use this if you don't want your label to be a <label> element |
aria-label | string | null | Set as an attribute of the embedded checkbox. Its value will only be seen by screen readers. |
License
MIT