Accessible Toggle Switch Component For React

A draggable, customizable, accessible, and iOS-style toggle switch component for React.

Installation:

# NPM
$ npm install react-switch --save

Usage:

Import the react-switch.

import React, { Component } from 'react';
import Switch from 'react-switch';

Create a default toggle switch.

export default class BasicExample extends Component {
  constructor() {
    super();
    this.state = { checked: false };
    this.handleChange = this.handleChange.bind(this);
  }

  handleChange(checked) {
    this.setState({ checked });
  }

  render() {
    return (
      <div className="example">
        <h2>Simple usage</h2>
        <label htmlFor="normal-switch">
          <span>Switch with default style</span>
          <Switch
            onChange={this.handleChange}
            checked={this.state.checked}
            className="react-switch"
            id="normal-switch"
          />
        </label>
        <p>The switch is <span>{this.state.checked ? 'on' : 'off'}</span>.</p>
      </div>
    );
  }
}

Default props.

disabled: false,
offColor: '#888',
onColor: '#080',
offHandleColor: '#fff',
onHandleColor: '#fff',
handleDiameter: null,
uncheckedIcon: defaultUncheckedIcon,
checkedIcon: defaultCheckedIcon,
boxShadow: null,
activeBoxShadow: '0px 0px 2px 3px #33bbff',
height: 28,
width: 56,
className: null,
id: null,
'aria-labelledby': null,
'aria-label': null

Preview:

Download Details:

Author: yogaboll

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/yogaboll/react-switch

License: MIT