Toggles

Used to turn something on or off

Toggles

Used to turn something on or off

Small
Medium
Default
Hover
Focus
Disabled
Off
On
Off
On
HTML
  
  <label class="toggle toggle-small">
    <input type="checkbox" />
    <span class="toggle-icon"></span>
  </label>
HTML

<label class="toggle toggle-medium">
  <input type="checkbox" />
  <span class="toggle-icon"></span>
</label>


HTML
  
  <label class="toggle toggle-small">
    <input type="checkbox" disabled />
    <span class="toggle-icon"></span>
  </label>
HTML

<label class="toggle toggle-medium">
  <input type="checkbox" disabled />
  <span class="toggle-icon"></span>
</label>



Left Align
Right Align
Default
Hover
Focus
Disabled
HTML
  
  <label class="toggle toggle-small">
    <input type="checkbox" />
    <span class="toggle-icon"></span>
    <span class="toggle-text">Toggle Text</span>
  </label>
HTML

<label class="toggle toggle-small toggle-right">
  <input type="checkbox"/>
  <span class="toggle-icon"></span>
  <span class="toggle-text">Toggle Text</span>
</label>


HTML
  
  <label class="toggle toggle-small">
    <input type="checkbox" disabled />
    <span class="toggle-icon"></span>
    <span class="toggle-text">Toggle Text</span>
  </label>
HTML

<label class="toggle toggle-small toggle-right">
  <input type="checkbox" disabled/>
  <span class="toggle-icon"></span>
  <span class="toggle-text">Toggle Text</span>
</label>