Switch

Use a switch when the change takes effect immediately, and a checkbox when it is submitted with a form.

Three sizes on the same control scale the rest of the library uses.

The six semantic tones, each repointing the same `--sw-solid` variable the track fill is built from.

A disabled switch is still a real checkbox input — `:disabled` drives the dimmed track and the cursor together, not just the colour.

Field only marks the switch invalid after a first submit attempt, and `Field.Error` mounts nothing until then.

`checked` and `onCheckedChange` are the entire contract — the buttons below prove it by driving every switch from outside.

A label and a line of helper text per switch, wired to the control through `Field.Description` rather than a hand-written `aria-describedby`.

Compact, `sm`-sized switches sharing one horizontal row, for a quick-settings tray rather than a form.

The classic settings-page row — label on the left, switch on the right — built from `Field.Root` with `justify-between` rather than a bespoke layout.

The switch disables itself while a change is in flight, and only commits once the request resolves — so the UI never shows a state the server rejected.

A grouped, real-world settings screen — two sections of switches sharing one card, each wired the same way as the single examples above.

Eleven looks built entirely from `className`, `containerClassName` and the `--sw-solid`/`--sw-w`/`--sw-h` variables — neon, glass, an oversized track, and more, with no fork of the component underneath any of them.

A hidden checkbox behind a fully custom surface — a lock, a play button, a speaker, a power button, a bubble — each swapping icon or clip-path on `peer-checked`/`has-checked` rather than swapping the switch track.

The three-bar pattern behind most hamburger menus — the same hidden checkbox driving a track elsewhere in this page now morphs bars into an arrow.

Six takes on the same idea, from a sliding thumb that uncovers the sun or moon to a disc that rises over hills and an orb that just crossfades color and icon.

Five takes on the same setting: a plane taxiing into open sky, one pitching into takeoff, one that just cuts the signal bars, a window shade pulling down over the view, and a boarding pass with a plane sliding along its dashed flight path.

Not a toggle at all — a three-phase button (idle, installing, installed) built the same way `loading.tsx` is: real state and a timeout, with the library’s own `Spinner` standing in for the progress ring.