webawesome/source/docs/switches.md

layout, title, description

layout	title	description
default.html	Switches	These pure CSS switches can be used as a checkbox replacement.

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 a for attribute that references the switch id
• 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>

Option 1 Option 2

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

Small Normal Big

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

Disabled

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>

Secondary Success Info Warning Danger Light Dark