Selection and input
Switch
An immediate on/off. Track and thumb both resize below md.
Available
Ports as-is
Dual breakpoint
Examples
This component's Storybook stories, embedded. They are the maintained source for its states, so Lantern shows them rather than keeping a duplicate set.
Switch
Rendered live from Storybook
Storybook must be running for this to load — npm run storybook from the repo root, or set NEXT_PUBLIC_STORYBOOK_URL to a deployed instance.
Reference
Transcribed from the component audit. If this disagrees with the source, the source is right.
- Source
src/components/ui/switch.tsx- Portability
- Copies across unchanged — only the utils import path moves.
- States to cover
uncheckedcheckeddisabledfocus ring- Dependencies
@radix-ui/react-switch- Responsive
- Carries a load-bearing
max-md:/md:pair. Sign off at both viewports — see the rule. - Notes
- 38×22 mobile, 32×18 desktop, with a matching thumb translate pair. Must be reviewed at both breakpoints.