Design Kit

Toggle Switch

Toggle switches are used to switch between two possible states.

Examples

Base

<div class="m-form__item">
  <label class="a-switch" for="toggle1">
    <input type="checkbox" class="a-switch__input" id="toggle1">
    <span class="a-switch__content">
      <span class="a-switch__thumb"></span>
    </span>
    <span class="a-switch__label">Label</span>
  </label>
</div>

Disabled

<div class="m-form__item">
  <label class="a-switch" for="toggle2">
    <input type="checkbox" class="a-switch__input" name="toggle2" value="toggle2" disabled>
    <span id="toggle2" class="a-switch__content">
      <span class="a-switch__thumb"></span>
    </span>
    <span class="a-switch__label">Label</span>
  </label>
</div>

Stacked

Group switches in m-form__item for easy stacking.

Configure options
<fieldset>
  <legend class="a-label">Configure options</legend>
  <div class="m-form__item">
    <label class="a-switch" for="toggle3">
      <input type="checkbox" class="a-switch__input" id="toggle3">
      <span class="a-switch__content">
        <span class="a-switch__thumb"></span>
      </span>
      <span class="a-switch__label">Label</span>
    </label>
  </div>
  <div class="m-form__item">
    <label class="a-switch" for="toggle4">
      <input type="checkbox" class="a-switch__input" id="toggle4">
      <span class="a-switch__content">
        <span class="a-switch__thumb"></span>
      </span>
      <span class="a-switch__label">Label</span>
    </label>
  </div>
</fieldset>

Inline

Apply the class -inline to m-form__item to display switches inline.

Configure options
<fieldset>
  <legend class="a-label">Configure options</legend>
  <div class="m-form__item -inline">
    <label class="a-switch" for="toggle5">
      <input type="checkbox" class="a-switch__input" id="toggle5">
      <span class="a-switch__content">
        <span class="a-switch__thumb"></span>
      </span>
      <span class="a-switch__label">Label</span>
    </label>
  </div>
  <div class="m-form__item -inline">
    <label class="a-switch" for="toggle6">
      <input type="checkbox" class="a-switch__input" id="toggle6">
      <span class="a-switch__content">
        <span class="a-switch__thumb"></span>
      </span>
      <span class="a-switch__label">Label</span>
    </label>
  </div>
</fieldset>

Switch list

Switch lists are used to wrap a series of switches in a list. To render, apply the class -list to m-form__item.

Select options
<fieldset>
  <legend class="a-label">Select options</legend>
  <ul class="m-form__item -list">
    <li class="m-form__item">
      <label class="a-switch" for="toggle10">
        <span class="a-switch__label">Label</span>
        <input type="checkbox" class="a-switch__input" id="toggle10">
        <span class="a-switch__content">
          <span class="a-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="m-form__item">
      <label class="a-switch" for="toggle11">
        <span class="a-switch__label">Label</span>
        <input type="checkbox" class="a-switch__input" id="toggle11">
        <span class="a-switch__content">
          <span class="a-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="m-form__item">
      <label class="a-switch" for="toggle12">
        <span class="a-switch__label">Label</span>
        <input type="checkbox" class="a-switch__input" id="toggle12">
        <span class="a-switch__content">
          <span class="a-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="m-form__item">
      <label class="a-switch" for="toggle13">
        <span class="a-switch__label">Label</span>
        <input type="checkbox" class="a-switch__input" id="toggle13">
        <span class="a-switch__content">
          <span class="a-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="m-form__item" for="toggle14">
      <label class="a-switch">
        <span class="a-switch__label">Label</span>
        <input type="checkbox" class="a-switch__input" id="toggle14">
        <span class="a-switch__content">
          <span class="a-switch__thumb"></span>
        </span>
      </label>
    </li>
  </ul>
</fieldset>

Switch with Left Label

<div class="m-form__item">
  <label class="a-switch" for="toggle7">
    <span class="a-switch__label">Label</span>
    <input type="checkbox" class="a-switch__input" id="toggle7">
    <span class="a-switch__content">
      <span class="a-switch__thumb"></span>
    </span>
  </label>
</div>

Switch with Hidden Label

Apply the class -label--hide to a-switch to render a switch without a label. Use this method for rendering switches in close proximity to other text that clearly describes its purpose.

<div class="m-form__item">
  <label class="a-switch -label--hide" for="toggle8">
    <input type="checkbox" class="a-switch__input" id="toggle8">
    <span class="a-switch__content">
      <span class="a-switch__thumb"></span>
    </span>
    <span class="a-switch__label">Label</span>
  </label>
</div>