Toggle & Range

Toggle is a CSS-only switch using label.toggle wrapping a checkbox. Range inputs are styled semantic <input type="range">. No JavaScript required for the toggle; range value display can be enhanced with JS if needed.

Toggle

Wrap a checkbox in <label class="toggle"> with a <span> for the label text.

<!-- Toggle (CSS-only) -->
<label class="toggle">
  <input type="checkbox">
  <span>Enable feature</span>
</label>

<!-- Checkbox -->
<label>
  <input type="checkbox"> Option
</label>

<!-- Range -->
<input type="range" min="0"
  max="100" value="50">

Dark mode enabledEmail notificationsAuto-save

Remember me Free Pro

Volume — 50%

Usage notes

• Toggle: label.toggle with a checkbox and <span> — the switch appearance is pure CSS.
• Checkbox / Radio: Style with appearance: none; use semantic <label> wrapping.
• Range: Semantic <input type="range">; use a .field with a label and optional value span (update via JS if desired).