Forms

Switch

Turns on and off right away, no save button.

CSS only

Example

Notifications Focus mode

<label class="u-switch"><input type="checkbox" role="switch" checked><span class="u-switch__track"></span>Notifications</label>
<label class="u-switch"><input type="checkbox" role="switch"><span class="u-switch__track"></span>Focus mode</label>

Installation

Switch ships in the full package, in unslop.css:

curl -fsSL unslop.leallabs.dev/i | sh

No build It's just CSS: with unslop.css on the page, the classes already work.

Classes and variants

Class	What it does
`u-switch`	The label that wraps the input and the track.
`u-switch__track`	The track with the knob.

Accessibility and keyboard

State and roles

Where	Attribute	What it says
`role="switch"`	on the checkbox input	Screen readers announce on and off.
checked	native attribute	On.

Keyboard

Key	Does
Tab	focuses the switch
Spacing	turns it on and off