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:
- Each switch must have a unique
id
- The
<label>
must have afor
attribute that references the switchid
- The
<label>
must come after the checkbox, otherwise the control won’t render
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).