Toggle
A pressable label that wraps a checkbox — looks like a button, works like a toggle.
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>