3.5.6 Input switch

Toggle example guides Toggle HTML markup

The switch is a based around the input type checkbox element. Wrap the checkbox in a <label> element and put a span with class lever next to the input element. Now you can put your labels at the beginning and end of the label.

Example
Markup: 02-atoms/form-controls/form-input-switch.twig 
<!-- Switch -->
<div class="switch">
  <label>
    Off
    <input type="checkbox" checked>
    <span class="lever"></span>
    On
  </label>
</div>

<!-- Disabled Switch -->
<div class="switch">
  <label>
    Off
    <input disabled="" type="checkbox">
    <span class="lever"></span>
    On
  </label>
</div>
Source: 02-atoms/form-controls/_switch.scss, line 1