The Switch component renders a specialized <input type="checkbox"> that is useful for displaying an “on” or “off” selection.

Props

name type default description
className string Class name for the root element.
HTML attributes various e.g. checked: true, disabled: true, events, etc. are applied to the input

Usage

Javascript:

<Switch checked />

Rendered markup:

<label class="Switch">
  <input class="Switch__input" type="checkbox" checked />
  <div className="Switch__indicator">
    <div className="Switch__toggler"></div>
  </div>
</label>
<div>
    <div class="text-1 mb1">Switch</div>
    <div class="d-flex align-items-center">
        <label class="Switch">
            <input type="checkbox" class="Switch__input" />
            <div class="Switch__indicator">
                <div class="Switch__toggler"></div>
            </div>
        </label><span class="ml5"><span class="uppercase-1">Click me!</span></span>
    </div>
</div>
import * as React from 'react';
import Switch from './switch.jsx';

class SwitchExample extends React.Component {
  constructor(props, context) {
    super(props, context);
    this.state = {
      checked: !!props.checked,
    };
  }

  render() {
    const { label, ...props } = this.props;
    const { checked } = this.state;

    return (
      <div>
        <div className="text-1 mb1">{label}</div>
        <div className="d-flex align-items-center">
          <Switch
            {...props}
            checked={checked}
            onChange={() => this.setState({ checked: !checked })}
          />
          {!props.disabled && (
            <span className="ml5"><span className="uppercase-1">Click me!</span>
            </span>
          )}
        </div>
      </div>
    );
  }
}

export default SwitchExample;
{
  "label": "Switch",
  "checked": null,
  "disabled": null
}
  • Content:
    @mixin switch-sizer() {
      $width: modular-scale-px(7);
      $height: modular-scale-px(3);
      $toggler-radius: $height - ($border-width * 2);
      $focus-indicator-radius: $toggler-radius - ($border-width * 6);
    
      .Switch__indicator {
        border-radius: ($height / 2);
        height: $height;
        width: $width;
    
      }
    
      .Switch__toggler {
        height: $toggler-radius;
        right: $width - $border-width - $toggler-radius;
        width: $toggler-radius;
    
        &::after {
          height: $focus-indicator-radius;
          width: $focus-indicator-radius;
        }
      }
    }
    
    .Switch {
      @include switch-sizer;
      // Cancel the default margin for label tags
      margin: 0;
      position: relative;
    }
    
    .Switch__indicator {
      background-color: $gray-300;
      cursor: pointer;
      transition: background-color .35s ease-out;
    }
    
    .Switch__toggler {
      @include depth(7);
      background: $white;
      border-radius: 50%;
      position: absolute;
      top: $border-width;
      transition: right .15s ease-out;
    
      &::after {
        background-color: $blue-100;
        border-radius: 50%;
        box-shadow: 0 0 5px 0 rgba($blue-100, $alpha-700);
        content: ' ';
        left: 50%;
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        transition: opacity .15s linear;
      }
    }
    
    .Switch__input {
      opacity: 0;
      position: absolute;
      z-index: -1;
    
      &:checked ~ .Switch__indicator {
        background-color: $green-200;
    
        .Switch__toggler {
          right: $border-width;
        }
    
      }
    
      &:disabled ~ .Switch__indicator {
        cursor: not-allowed;
        opacity: $alpha-600;
      }
    }
    
    .Switch--is-focused {
      .Switch__toggler {
        &::after {
          opacity: 1;
        }
      }
    }
    
  • URL: /components/raw/switch/_switch.scss
  • Filesystem Path: library/components/switch/_switch.scss
  • Size: 1.6 KB