1. Docs
  2. Components
  3. Switch
Buy Now Contact

Switch

Fancy switch-like appearnce for checkboxes.

ON


<div class="c-switch is-active">
    <input class="c-switch__input" id="switch1" type="checkbox" checked="checked">
    <label class="c-switch__label" for="switch1">Label</label>
</div>

OFF


<div class="c-switch">
    <input class="c-switch__input" id="switch1" type="checkbox">
    <label class="c-switch__label" for="switch1">Label</label>
</div>

Disabled


<div class="c-switch is-disabled">
    <input class="c-switch__input" id="switch2" type="checkbox" disabled>
    <label class="c-switch__label" for="switch2">Disabled</label>
</div>

Contents: