React Switch

Simple usage

The switch is off.

const BasicHooksExample = () => {
  const [checked, setChecked] = useState(false);
  const handleChange = nextChecked => {
    setChecked(nextChecked);
  };

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


/* styles.css */

.react-switch {
  vertical-align: middle;
  margin-left: 4px;
}
        

Custom styling

class MaterialDesignSwitch 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>Custom styling</h2>
        <label htmlFor="material-switch">
          <span>Switch with style inspired by Material Design</span>
          <Switch
            checked={this.state.checked}
            onChange={this.handleChange}
            onColor="#86d3ff"
            onHandleColor="#2693e6"
            handleDiameter={30}
            uncheckedIcon={false}
            checkedIcon={false}
            boxShadow="0px 1px 5px rgba(0, 0, 0, 0.6)"
            activeBoxShadow="0px 0px 1px 10px rgba(0, 0, 0, 0.2)"
            height={20}
            width={48}
            className="react-switch"
            id="material-switch"
          />
        </label>
      </div>
    )
  }
}
          

The kitchen sink

<label htmlFor="small-radius-switch">
  <span>A switch all available styling options</span>
  <Switch
    checked={this.state.checked}
    onChange={this.handleChange}
    handleDiameter={28}
    offColor="#08f"
    onColor="#0ff"
    offHandleColor="#0ff"
    onHandleColor="#08f"
    height={40}
    width={70}
    borderRadius={6}
    activeBoxShadow="0px 0px 1px 2px #fffc35"
    uncheckedIcon={
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          fontSize: 15,
          color: "orange",
          paddingRight: 2
        }}
      >
        Off
      </div>
    }
    checkedIcon={
      <svg viewBox="0 0 10 10" height="100%" width="100%" fill="yellow">
        <circle r={3} cx={5} cy={5} />
      </svg>
    }
    uncheckedHandleIcon={
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          fontSize: 20
        }}
      >
        ☹
      </div>
    }
    checkedHandleIcon={
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          height: "100%",
          color: "red",
          fontSize: 18
        }}
      >
        ♥
      </div>
    }
    className="react-switch"
    id="small-radius-switch"
  />
</label>
          

Disabled switch

<label htmlFor="disabled-switch">
  <span>You can not click, drag or tab to it</span>
  <Switch
    onChange={() => {}}
    checked
    disabled
    className="react-switch"
    id="disabled-switch"
  />
</label>
      

Additional props

All additional props that are not part of the react-switch API will be passed on to the nested <input /> element. In this example, we passed it the 'required' attribute. Other examples are aria-*-attributes, tabIndex, name etc.

<Switch
  className="react-switch"
  onChange={this.handleChange}
  checked={this.state.checked}
  required
/>
        

Switch which cannot be turned back off

<Switch
  onChange={() => setChecked(true)}
  checked={checked}
  className="react-switch"
/>
        

Switch using aria-labelledby

Use this if you do not want clicking on the label to cause the switch to toggle.

<p id="neat-label">Use this if you do not want clicking on the label to cause the switch to toggle.</p>
<Switch
  className="react-switch"
  onChange={this.handleChange}
  checked={this.state.checked}
  aria-labelledby="neat-label"
/>
        

Switch with invisible label only readable by screen readers

If the meaning of the switch is self-evident to sighted users but not people who use screen readers, you can use the aria-label attribute.

<Switch
  className="react-switch"
  onChange={this.handleChange}
  checked={this.state.checked}
  aria-label="super secret label that is not visible"
/>