A pressable label wrapped around a checkbox. Looks like a button, behaves like a toggle.
Standalone
<link rel="stylesheet" href="https://esm.sh/@erikt/ui/toggle.css" />Default
<label class="toggle">
<input type="checkbox" />
<svg>...</svg>
Bookmark
</label>Checked
Works with or without an icon.
<label class="toggle">
<input type="checkbox" checked />
<svg>...</svg>
Bookmark
</label>Square
Add .square for an icon-only toggle with equal padding.
<label class="toggle square" aria-label="Bookmark">
<input type="checkbox" />
<svg>...</svg>
</label>Ghost
Add .ghost to remove the outline.
<label class="toggle ghost">
<input type="checkbox" />
<svg>...</svg>
Bookmark
</label>Fill
Add .fill to fill the SVG icon when checked.
<label class="toggle fill">
<input type="checkbox" checked />
<svg>...</svg>
Bookmark
</label>Conditional content
Children with data-checked or
data-unchecked are shown only in the matching state.
<label class="toggle">
<input type="checkbox" />
<span data-unchecked>Follow</span>
<span data-checked>Following</span>
</label>
Combine with .ghost for icon-only toggles like a theme
switcher.
<label class="toggle ghost square" aria-label="Toggle theme">
<input type="checkbox" />
<svg data-unchecked><!-- sun --></svg>
<svg data-checked><!-- moon --></svg>
</label>Disabled
<label class="toggle">
<input type="checkbox" disabled />
<svg>...</svg>
Bookmark
</label>API reference
| Type | Classes / attributes | What it does |
|---|---|---|
| Variant | .ghost |
No border until checked |
| Fill | .fill |
Fills the icon with the primary color when checked |
| Shape | .square |
Equal padding on all sides, for icon toggles |
| Checked content | [data-checked] |
Shown only while checked |
| Unchecked content | [data-unchecked] |
Shown only while unchecked |
| Disabled | [disabled] |
On the input, fades the toggle and blocks input |