toggle billing switch pricing checkbox peer pricing page monthly/annual billing switch feature flag toggle in settings boolean preference control native checkbox is visually inconsistent across browsers need a polished toggle without a JavaScript component
Billing Toggle
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/billing-toggle.json Preview
Background
Customize
Quick Start
<label class="billing-toggle"><input type="checkbox" class="billing-toggle__input" role="switch" aria-checked="false"></label>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 1267 bytes · 55 lines
- Custom Properties
-
--toggle-on--toggle-off--toggle-width--toggle-height - Classes
-
.billing-toggle.billing-toggle__input
toggle billing switch pricing checkbox peer
Wrap a native <input type="checkbox"> with .billing-toggle__input inside any label. No JavaScript required — the checked state drives the thumb position and track color via CSS appearance: none. Full keyboard support and focus-visible ring included.
Billing page toggle
<div class="flex items-center gap-3">
<span class="text-sm font-medium">Monthly</span>
<label>
<input
type="checkbox"
class="billing-toggle__input"
role="switch"
aria-checked="false"
aria-label="Switch to annual billing"
>
</label>
<span class="text-sm font-medium">
Annual <span class="text-xs text-green-600 font-semibold">Save 20%</span>
</span>
</div>Custom brand colors
<input type="checkbox" class="billing-toggle__input"
style="--toggle-on: oklch(55% 0.2 145); --toggle-off: oklch(85% 0.01 75)">