Switch

Switch component with a "toggled on" and "toggled off" state.

  • Default
  • Inverse
<div class="lui-switch">
  <label class="lui-switch__label">
    <input type="checkbox" class="lui-switch__checkbox" aria-label="Label"/>
    <span class="lui-switch__wrap">
      <span class="lui-switch__inner"></span>
      <span class="lui-switch__switch"></span>
    </span>
  </label>
</div>
<div class="lui-switch  lui-switch--inverse">
  <label class="lui-switch__label">
    <input type="checkbox" class="lui-switch__checkbox"  aria-label="Label"/>
    <span class="lui-switch__wrap">
      <span class="lui-switch__inner"></span>
      <span class="lui-switch__switch"></span>
    </span>
  </label>
</div>