Switch

stablev1.0.0·open in canvas

On/off toggle on Radix Switch.

Installnpx shadcn add @cids/switch

Live demo

Public watchlist

Motion · tap to replay

honors reduced-motion

Track color + thumb translate, 150ms targeted; reduced-motion via global reset.

Brand chip remounts on tap · highlighted tokens are named in this component's doc · spring is budgeted to human feedback only.

import { Switch } from "@/design-system";

<Switch checked={on} onCheckedChange={setOn} aria-label="Public watchlist" />

Tokens · live

Resolves in the active theme — flip the toggle above to verify.

--brand
--on-brand
--surface-bright
--outline-variant
--elevation-1

States · live

Forced instances — hover/focus still work on the live demo above.

off - on - focus-visible - disabled.

on

off

disabled

On/off toggle on Radix Switch.

Anatomy

(o---)  off: surface-bright track
(---o)  on: brand track, on-brand thumb

Props

Prop	Type	Default	Notes
`checked` / `onCheckedChange`	controlled pair	--	Caller owns state.
`disabled`	`boolean`	--	Native semantics via Radix.
`className`	`string`	--	cn-merged onto the track.
...rest	Radix Switch props	--	e.g. `aria-label`, `name`.

Motion

Track color + thumb translate, 150ms targeted; reduced-motion via global reset.

· Radix Switch: role="switch", aria-checked, Space/Enter toggle.
· Label from the caller (aria-label or an associated <label>).

Self-contained: copy the folder into any Tailwind+React app, or use the install command above. Docs and this page render the same file on disk — they cannot drift.