A binary setting. Native, quiet, unmistakably Irozon.
.iz-switch is for real on/off settings — Notifications, Auto-save,
Dark mode — built on a native checkbox with role="switch". No
JavaScript is required for the switch itself to work; checked state is the
source of truth, read via :checked, never a JS-managed class.
Switch uses the same quiet rounded geometry as Irozon's other controls rather
than a fully pill-shaped treatment.
.iz-switch on a <label> wrapping the input, track and (optional) label text.<input type="checkbox" role="switch"> — :checked, :disabled, :focus-visible.<label class="iz-switch">
<input class="iz-switch__input" type="checkbox" role="switch" />
<span class="iz-switch__track" aria-hidden="true">
<span class="iz-switch__thumb"></span>
</span>
<span class="iz-switch__label">Enable notifications</span>
</label>Off is neutral. On is Green + Ink — nothing else.
Off never uses Green — a neutral semantic surface with a canonical border and a clearly visible thumb. On is a purposeful, functional use of Green: the track becomes Green, the thumb becomes Ink. Never Lime, no gradient, no glow — a real state, not decoration.
disabled — reduced emphasis, still legible
Try Tab-ing to any switch above — the focus ring draws on the visible track from
the hidden native input's own :focus-visible state, offset 3px so it
stays perceptible even when the track itself is already Green.
Precise and quiet. No spring, no bounce.
The thumb's travel, track color and border animate on --motion-duration-fast
with --motion-ease-standard — the same hover-state timing used
everywhere else in the system, never transition: all. Reduced motion
removes the travel/color easing entirely; the on/off state still changes
immediately, just without animating.
Two valid patterns — pick by context, not by default.
.iz-switch is a binary settings control. It does not replace every
existing sun/moon theme-toggle icon button — that stays a valid, compact pattern
in its own right.
.iz-button — data-icon-only, aria-pressed, sun/moon icons. Already the pattern Irozon Invoice uses for its own theme toggle..iz-switch — a labeled, binary setting among other labeled, binary settings.Checked, not assumed.
<input type="checkbox" role="switch"> — keyboard support (Space to toggle, Tab to focus) comes free from the browser; no custom key handling.<label> — track and text — is clickable, not just the 40×24px track.__label may be omitted if the consumer supplies an accessible name another way (e.g. aria-label on the input) — a track-only switch stays fully accessible.disabled on the input — removed from the tab order and inert for free, cursor communicates it on the whole row via :has().prefers-reduced-motion: reduce — the state still changes immediately, just without easing.