Switch
A tactile toggle for settings that take effect immediately.
pnpm dlx shadcn@latest add @uiarc/switchLive · keyboard ready
- Settings that take effect as soon as they are flipped, like notifications.
- Settings lists where each row is one on and off preference.
- Use checkbox when the choice waits for a submit button.
- Use segmented-control for a choice between named options.
- Use theme-switch for a light and dark toggle.
Installation
Add Switch with the shadcn CLI, or copy the source by hand.
pnpm dlx shadcn@latest add @uiarc/switchAdds the component and its local dependencies, and installs @radix-ui/react-switch, motion. First time? Add the @uiarc registry to components.json, or use the full URL:
example.tsx
import { Switch } from "@/registry/components/switch/switch"; export function NotificationsToggle() { const [enabled, setEnabled] = useState(true); return <Switch label="Email notifications" checked={enabled} onCheckedChange={setEnabled} />;}Switch
A Radix switch whose thumb stretches while pressed and travels on a spring.
PropTypeDefaultDescription
labelstring–Visible label inside the switch; also used as aria-label when none is passed.checkedboolean–Controlled state.defaultCheckedbooleanfalseInitial state when uncontrolled.onCheckedChange(checked: boolean) => void–Called on every toggle....propsComponentPropsWithoutRef<typeof SwitchPrimitive.Root>–Radix Switch root props, including ref, name, disabled, and aria-label. Pointer and key handlers are chained, not replaced.- SpaceorEnter
- Toggles the switch. Holding Space stretches the thumb until release.
- Radix renders a button with role="switch" and aria-checked.
- The label prop becomes aria-label unless one is passed; icon-only usage needs an aria-label.
- Pressing stretches the thumb toward the other side like a held finger; releasing sends it across on a snappy spring.
- Reduced motion removes the stretch and moves the thumb instantly; CSS transitions are also disabled.
- The switch is inline and keeps a control-height minimum, so the whole label is a touch target.
- Hover styles apply only on fine pointers; touch gets the press stretch.
- Motion is CSS transitions on the track and thumb, with no observers or per-frame work.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for settings that take effect immediately. Use checkbox for choices confirmed by a submit button.
- Exported both as a named and a default export.
- Pass name to submit with a form through Radix's hidden input.
The full library index for assistants is at /llms.txt.