<h3>
  Use toggles when the user needs to turn something
  on and off like a light switch.
</h3>

<p>
  A small toggle
  <div class="toggle toggle--sm" id="toggle-sm-switch">
    <input type="checkbox" id="toggle-sm-input" class="toggle__input">
    <label class="toggle__label" for="toggle-sm-input">
      <span class="toggle__screenreader-message">Toggle this option</span>
      <span class="toggle__switch" aria-hidden="true">
        <span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
          <svg class="icon icon--sm"><use xlink:href="#ei-check"></use></svg>
        </span>
        <span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
          <svg class="icon icon--sm"><use xlink:href="#ei-close-o"></use></svg>
        </span>
      </span>
    </label>
  </div>
</p>

<p>
  A medium toggle
  <div class="toggle toggle--md" id="toggle-md-switch">
    <input type="checkbox" id="toggle-md-input" class="toggle__input">
    <label class="toggle__label" for="toggle-md-input">
      <span class="toggle__screenreader-message">Toggle this option</span>
      <span class="toggle__switch" aria-hidden="true">
        <span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
          <svg class="icon icon--md"><use xlink:href="#ei-check"></use></svg>
        </span>
        <span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
          <svg class="icon icon--md"><use xlink:href="#ei-close-o"></use></svg>
        </span>
      </span>
    </label>
  </div>
</p>

<p>
  A large toggle
  <div class="toggle toggle--lg" id="toggle-lg-switch">
    <input type="checkbox" id="toggle-lg-input" class="toggle__input">
    <label class="toggle__label" for="toggle-lg-input">
      <span class="toggle__screenreader-message">Toggle this option</span>
      <span class="toggle__switch" aria-hidden="true">
        <span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
          <svg class="icon icon--lg"><use xlink:href="#ei-check"></use></svg>
        </span>
        <span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
          <svg class="icon icon--lg"><use xlink:href="#ei-close-o"></use></svg>
        </span>
      </span>
    </label>
  </div>
</p>

<p>
  A toggle with text options
  <div class="toggle toggle--lg" id="toggle-text">
    <input type="checkbox" id="toggle-text-switch" class="toggle__input">
    <label class="toggle__label" for="toggle-text-switch">
      <span class="toggle__screenreader-message">Toggle this option</span>
      <span class="toggle__switch" aria-hidden="true">
        <span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
          ON
        </span>
        <span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
          OFF
        </span>
      </span>
    </label>
  </div>
</p>

<p>
A disabled toggle
  <div class="toggle toggle--lg">
    <input type="checkbox" id="toggle-input-disabled" class="toggle__input" disabled>
    <label class="toggle__label" for="toggle-input-disabled">
      <span class="toggle__screenreader-message">Toggle this option</span>
      <span
        class="toggle__disabled-message"
        data-checked="On"
        data-unchecked="Off"
        aria-hidden="true"
      ></span>
      <span class="toggle__switch" aria-hidden="true">
        <span class="toggle__switch-option toggle__switch-option--on" aria-hidden="true">
          <svg class="icon icon--lg"><use xlink:href="#ei-check"></use></svg>
        </span>
        <span class="toggle__switch-option toggle__switch-option--off" aria-hidden="true">
          <svg class="icon icon--lg"><use xlink:href="#ei-close-o"></use></svg>
        </span>
      </span>
    </label>
  </div>
</p>