Switch

A toggle switch using <input type="checkbox" class="switch">.

Composed of

Checkbox: The native checkbox it restyles

Standalone

<link rel="stylesheet" href="https://esm.sh/@erikt/ui/switch.css" />

Default

<input type="checkbox" class="switch" />

Checked

<input type="checkbox" class="switch" checked />

With label

Notifications Dark mode

<label>
  <input type="checkbox" class="switch" checked />
  Notifications
</label>
<label>
  <input type="checkbox" class="switch" />
  Dark mode
</label>

Disabled

<input type="checkbox" class="switch" disabled />
<input type="checkbox" class="switch" disabled checked />

API reference

Type	Classes / attributes	What it does
Disabled	`[disabled]`	Fades the switch and blocks input