react-toggle

npm install react-toggle --save

import Toggle from 'react-toggle'

Or if you're not using the ES6 module format yet:

var Toggle = require('react-toggle')

Include the component's CSS.

<label>
  <Toggle
    defaultChecked={this.state.baconIsReady}
    onChange={this.handleBaconChange} />
  <span>Wrapper label tag</span>
</label>

this.state.baconIsReady: false

<Toggle
  id='cheese-status'
  defaultChecked={this.state.cheeseIsReady}
  onChange={this.handleCheeseChange} />
<label htmlFor='cheese-status'>Adjacent label tag</label>

this.state.cheeseIsReady: false

<Toggle
  id='biscuit-status'
  defaultChecked={this.state.biscuitIsReady}
  aria-labelledby='biscuit-label'
  onChange={this.handleBiscuitChange} />
<span id='biscuit-label'>Adjacent label, but not standard tag</span>

this.state.biscuitIsReady: false

<Toggle
  defaultChecked={this.state.eggsAreReady}
  aria-label='No label tag'
  onChange={this.handleEggsChange} />
<span>No label tag</span>

this.state.eggsAreReady: false

handleChange(event) {
  // do something with event.target.checked
}

<Toggle
  defaultChecked={this.state.milkIsReady}
  name='milkIsReady'
  value='yes' />

formData: {}

<Toggle
  checked={this.state.burritoIsReady}
  name='burritoIsReady'
  value='yes'
  onChange={this.handleBurritoChange}/>

<Toggle
  checked={this.state.toastIsReady}
  name='toastIsReady'
  value='yes' />

<label>
  <Toggle
    defaultChecked={false}
    disabled={true} />
  <span className='label-text'>Disabled, Unchecked</span>
</label>
<label>
  <Toggle
    defaultChecked={true}
    disabled={true} />
  <span className='label-text'>Disabled, Checked</span>
</label>

<label>
  <Toggle
    defaultChecked={this.state.aubergineIsReady}
    className='custom-classname'
    onChange={this.handleAubergineChange} />
  <span>Custom className</span>
</label>

.custom-classname.react-toggle--checked .react-toggle-track {
  background-color: #ab199f;
}

<label>
  <Toggle
    defaultChecked={this.state.soupIsReady}
    icons={{
      checked: <Heart />,
      unchecked: null,
    }}
    onChange={this.handleSoupChange} />
  <span>Custom icons</span>
</label>

<label>
  <Toggle
    defaultChecked={this.state.tofuIsReady}
    icons={false}
    onChange={this.handleTofuChange} />
  <span>No icons</span>
</label>