<!--
  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="{{prefix}}--form-item">
  <input class="{{prefix}}--toggle-input" id="toggle0" type="checkbox">
  <label class="{{prefix}}--toggle-input__label" for="toggle0" aria-label="example toggle with state indicator text">
    <span class="{{prefix}}--toggle__switch">
      <span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
      <span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="{{prefix}}--form-item">
  <input class="{{prefix}}--toggle-input" id="toggle1" type="checkbox">
  <label class="{{prefix}}--toggle-input__label" for="toggle1">
    Toggle with visible label
    <span class="{{prefix}}--toggle__switch">
      <span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
      <span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="{{prefix}}--form-item">
  <input class="{{prefix}}--toggle-input" id="toggle3" type="checkbox" disabled>
  <label class="{{prefix}}--toggle-input__label" for="toggle3"
    aria-label="example disabled toggle with state indicator text">
    <span class="{{prefix}}--toggle__switch">
      <span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
      <span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>

<div class="{{prefix}}--form-item">
  <input class="{{prefix}}--toggle-input" id="toggle4" type="checkbox" disabled>
  <label class="{{prefix}}--toggle-input__label" for="toggle4">
    Toggle with visible label
    <span class="{{prefix}}--toggle__switch">
      <span class="{{prefix}}--toggle__text--off" aria-hidden="true">Off</span>
      <span class="{{prefix}}--toggle__text--on" aria-hidden="true">On</span>
    </span>
  </label>
</div>
