Toggle

Under the hood, this element is an input checkbox, but it has a different design.

Default

Default
Selected
Disabled
Disabled (selected)
Default

Usage

<!-- toggle -->
<form class="ui-form">
  <fieldset>

    <!-- default -->
    <div class="ui-form__group">
      <div class="ui-toggle">
        <label>...
          <input type="checkbox" name="a">
          <span class="ui-toggle__bg"></span>
        </label>
      </div>
    </div>

    <!-- checked & disabled -->
    <div class="ui-form__group">
      <div class="ui-toggle">
        <label>...
          <input type="checkbox" name="a" checked disabled>
          <span class="ui-toggle__bg"></span>
        </label>
      </div>
    </div>

  </fieldset>
</form>