Switches

Switches provide an alternative to standard checkboxes. Many people find them more intuitive and easier to use, especially on mobile devices. Shoelace provides a way to create beautiful, animated switches with pure CSS.

Because this is a pure CSS solution, there are a couple important things to remember:

The markup for a switch looks like this:

<span class="switch">
  <input type="checkbox" class="switch" id="switch-1">
  <label for="switch-1">Option 1</label>
</span>

<span class="switch">
  <input type="checkbox" class="switch" id="switch-2" checked>
  <label for="switch-2">Option 2</label>
</span>

Use the switch-small and switch-big modifiers to change the size of a switch.

Disabled switches are dimmed out. To disable a switch, add the disabled attribute to the checkbox (not the wrapper).

Variations

Use the switch-* modifier to create variations.

<span class="switch switch-secondary">...</span>
<span class="switch switch-success">...</span>
<span class="switch switch-info">...</span>
<span class="switch switch-warning">...</span>
<span class="switch switch-danger">...</span>
<span class="switch switch-light">...</span>
<span class="switch switch-dark">...</span>