Switch

Use a switch when the change takes effect immediately, and a checkbox when it is submitted with a form. Each tile copies on its own.

Three sizes on the same control scale the rest of the library uses. Each tile copies on its own.

The six semantic tones, each repointing the same `--sw-solid` variable the track fill is built from. Each tile copies on its own.

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

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. Each tile copies on its own.

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

Sixteen 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. Each tile copies on its own.

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. Each tile copies on its own.

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. Each tile copies on its own.

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. Each tile copies on its own.

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. Each tile copies on its own.

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.