About the shadcn/ui Switch Component
The Switch component is part of shadcn/ui — a collection of accessible, copy-paste React components built with Radix UI and Tailwind CSS. Install it with `npx shadcn@latest add switch` and copy it directly into your project.
Switch Component — Frequently Asked Questions
How do I use shadcn Switch with React Hook Form?
Use `<Controller>` or `<FormField>`: set `checked={field.value}` and `onCheckedChange={field.onChange}` on `<Switch>`. The Form example demonstrates this pattern.
How do I add a label to a shadcn Switch?
Use `<Label htmlFor="switch-id">Setting</Label><Switch id="switch-id">`. The `htmlFor`/`id` pair associates the label so clicking it toggles the switch.
How do I make a group of switches exclusive (only one active)?
Use a single `useState` tracking the active switch id. Each `<Switch checked={active === id} onCheckedChange={() => setActive(id)}>` creates radio-like behavior.