Question 1

What is a shadcn switch?

Accepted Answer

A shadcn Switch is the iOS-style toggle for binary settings — airplane mode, dark mode, notifications on/off, push notifications. The thumb slides from left to right to indicate state, with smooth color and position transitions. It's built on Radix UI's Switch primitive (proper checkbox role, keyboard activation with Space, controlled/uncontrolled modes) styled with shadcn/ui.

Question 2

Are these switch examples free?

Accepted Answer

Yes, every switch example on shadcn.io is free for personal and commercial use — no attribution requirement, no runtime dependency, no gating.

Question 3

Switch vs Checkbox vs Toggle — which one?

Accepted Answer

Switch for binary settings where the change takes effect immediately and is reversible ("airplane mode", "dark mode"). Checkbox for selecting items in a list or accepting terms (state submitted with the form). Toggle for visual toggle buttons in toolbars (bold, italic). The metaphors diverge: switch flips a setting NOW, checkbox marks a choice for SUBMISSION, toggle presses a button.

Question 4

When should I auto-save versus require explicit confirmation?

Accepted Answer

Switches almost always auto-save. The whole point of the metaphor ("flip the switch") is immediate action — adding a Save button defeats the purpose. For settings that need confirmation (irreversible toggle that costs money), use a Switch + AlertDialog confirmation, or just use a Checkbox + Save button instead. Reserve switches for safe, instant settings.

Question 5

How do I show a loading state during async toggle (server save)?

Accepted Answer

Track `isPending` state. While the network request is in flight: disable the switch (`disabled` prop) AND show a small Spinner next to it OR replace the switch with a spinner of similar size. On success, re-enable the switch in its new state. On error, revert the switch to its previous state and show an inline error message. Don't let users toggle multiple times during pending — race conditions are real.

Question 6

How do I label a switch (label on which side)?

Accepted Answer

Label on the LEFT, switch on the RIGHT — the iOS / Material convention users expect. The label describes the setting ("Email notifications") and the switch shows the state. For the labeled variant in this gallery, the entire row is the click target — clicking the label toggles the switch. For settings rows with descriptions, label + description on the left, switch on the right; vertical spacing keeps the row readable.

Question 7

How do I add icons inside the switch (sun / moon for dark mode)?

Accepted Answer

Use the icons variant. Render a small icon (Sun / Moon) inside the switch's thumb, swapping based on checked state via `data-[state=checked]:`. This is the canonical dark-mode toggle pattern — the icon doubles as visual confirmation of the current mode (no need for a separate label). Keep icons small (size-3 inside a default Switch) so they fit inside the thumb without cropping.

Question 8

How do I install a switch example?

Accepted Answer

Run the `npx shadcn@latest add` command shown under the Installation heading. The CLI copies the example's TSX source into `components/examples/switch/…`, plus the shadcn/ui Switch primitive (and its Radix dependency) if you don't already have it.

Question 9

How do I integrate the switch with react-hook-form?

Accepted Answer

Wrap Switch in shadcn's FormField. Pass `field.value` to `checked` and `field.onChange` to `onCheckedChange`. The form value is a boolean. For Zod, use `z.boolean()` (or `z.boolean().default(false)` for default-off). For settings forms that auto-save individual fields, skip the form library entirely — just useState + a debounced save handler per switch.

Question 10

How do I size or restyle the switch?

Accepted Answer

Pass className overrides — `className="h-5 w-9"` for a smaller switch, `"h-7 w-14"` for larger touch-friendly. Match the size to the surrounding form density. For brand colors, override the checked state via `data-[state=checked]:bg-emerald-500` and the unchecked state via `data-[state=unchecked]:bg-input`. The switch primitive uses `data-state` attributes for both halves of the toggle.

Question 11

Which libraries do switch examples depend on?

Accepted Answer

Radix UI Switch (the primitive — checkbox role, keyboard activation, controlled / uncontrolled, ARIA-checked), shadcn/ui Switch (the styled wrapper generated into your project), Tailwind CSS, and Lucide React (for icon-led switch variants). React 19 baseline. No state library — switch state lives in useState or your form library.

Question 12

Are switch examples accessible for keyboard and screen reader users?

Accepted Answer

Yes. Radix Switch sets `role="switch"` and `aria-checked` (true/false) — screen readers announce "switch, on" / "switch, off" appropriately. Tab focuses the switch; Space toggles it. The associated label (via shadcn's Label primitive) clicks-to-toggle thanks to `htmlFor` wiring. For the visual icon-led variants, ensure `aria-label` describes the action ("Switch to dark mode") since the icon alone isn't text.

Question 13

Can I use these switch examples with React Server Components?

Accepted Answer

Switch is a client component (it manages checked state). Wrap it inside a Server Component parent. For settings auto-save, pair the Switch with a small client wrapper that fires a Server Action on toggle — the Switch lives in the client boundary, the action runs server-side.

React Switch Examples for shadcn/ui

Browse every switch example

Frequently Asked Questions