Toggle

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <input class="bx--toggle" id="toggle1" type="checkbox">
  <label class="bx--toggle__label" for="toggle1">
    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
    <span class="bx--toggle__appearance"></span>
    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
  </label>
</div>

<fieldset class="bx--fieldset">
  <legend class="bx--label">Toggle w/ Label</legend>
  <div class="bx--form-item">
    <input class="bx--toggle" id="toggle2" type="checkbox">
    <label class="bx--toggle__label" for="toggle2">
    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
    <span class="bx--toggle__appearance"></span>
    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
  </label>
  </div>
</fieldset>

<div class="bx--form-item">
  <input class="bx--toggle" id="toggle3" type="checkbox" disabled>
  <label class="bx--toggle__label" for="toggle3">
    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
    <span class="bx--toggle__appearance"></span>
    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
  </label>
</div>

<!-- 
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <input class="bx--toggle bx--toggle--small" id="toggle4" type="checkbox" aria-label="Label Name">
  <label class="bx--toggle__label" for="toggle4">
    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
    <span class="bx--toggle__appearance">
      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
    </span>
    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
  </label>
</div>

<div class="bx--form-item">
  <input class="bx--toggle bx--toggle--small" id="toggle5" type="checkbox" aria-label="Label Name"
    disabled>
  <label class="bx--toggle__label" for="toggle5">
    <span class="bx--toggle__text--left" aria-hidden="true">Off</span>
    <span class="bx--toggle__appearance">
      <svg class="bx--toggle__check" width="6px" height="5px" viewBox="0 0 6 5">
        <path d="M2.2 2.7L5 0 6 1 2.2 5 0 2.7 1 1.5z" />
      </svg>
    </span>
    <span class="bx--toggle__text--right" aria-hidden="true">On</span>
  </label>
</div>