Toggle
A two-state button backed by a native checkbox or radio, styled like a button.
A toggle is a <label class="toggle"> wrapping a visually-hidden <input> and the
visible content. It looks exactly like a button — same
data-variant and data-size options — but the on state reuses the button's
active look, driven entirely by the native input's :checked state (no JS). Use a
checkbox for an independent on/off control; use a radio (sharing a name) when
exactly one of a set may be on.
Give icon-only toggles an accessible name with aria-label on the input.
Variants
<div class="flex flex-col items-start gap-md"> <div class="flex items-center gap-sm"> <label class="toggle" data-size="icon"> <input type="checkbox" aria-label="Bold" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <path d="M6 4h8a4 4 0 0 1 0 8H6z" /> <path d="M6 12h9a4 4 0 0 1 0 8H6z" /> </svg> </label> <label class="toggle" data-size="icon"> <input type="checkbox" aria-label="Italic" checked /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <line x1="19" y1="4" x2="10" y2="4" /> <line x1="14" y1="20" x2="5" y2="20" /> <line x1="15" y1="4" x2="9" y2="20" /> </svg> </label> <label class="toggle" data-size="icon" data-variant="ghost"> <input type="checkbox" aria-label="Underline" /> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" > <path d="M6 4v6a6 6 0 0 0 12 0V4" /> <line x1="4" y1="20" x2="20" y2="20" /> </svg> </label> </div> <div class="flex items-center gap-sm"> <label class="toggle"> <input type="checkbox" /> <span>Bold</span> </label> <label class="toggle"> <input type="checkbox" checked /> <span>Italic</span> </label> <label class="toggle" data-variant="ghost"> <input type="checkbox" disabled /> <span>Disabled</span> </label> </div></div>API
| Attribute | Values |
|---|---|
data-variant | primary, muted, ghost, destructive (omit = default) |
data-size | sm, icon, icon-sm |
The toggle's tokens (--toggle-background, --toggle-radius, …) default to the
matching --button-* token, so theming the button family re-skins toggles for free.
Override a --toggle-* token at :root or inline for a one-off. To join several
toggles into one segmented control, see toggle group.