Shadcn Switch Examples: Toggle Settings On and Off in React
A switch is a control that lets the user toggle between checked and unchecked, the digital equivalent of a physical on and off switch. The shadcn switch component delivers this react toggle switch with keyboard support, form integration, and disabled states, its thumb and track styled with Tailwind CSS tokens so it fits any theme without custom work.
Ten switch examples, Switch 1 through Switch 10, are collected on this page: plain toggles, switches with labels and descriptions, card style settings rows, colored and resized variants, and disabled states. All examples are TypeScript and work in controlled or uncontrolled form setups.
Key features
- True toggle semantics: The control renders role switch with aria-checked, so assistive technology reports on and off correctly.
- Keyboard operable: Space and Enter flip the state, and focus-visible styling shows exactly where focus sits.
- Controlled and uncontrolled modes: Use checked with onCheckedChange for React state, or defaultChecked for simple forms.
- Form ready: A name prop submits the value with native forms, including Next.js server actions.
- Effortless theming: Track and thumb colors derive from design tokens, and size or color overrides take one class.
Best practices
- Apply changes immediately: A switch promises instant effect. If the setting needs a save button, a checkbox is the honest control.
- Label the state, not the action: Write Email notifications rather than Turn on email notifications, since the position shows the state.
- Always attach a label: Connect a visible label with htmlFor so the click target grows and screen readers announce the purpose.
- Show side effects nearby: If toggling triggers a request, reflect failures by reverting the switch and explaining with a toast.
- Avoid switches for required consent: Legal agreements should use a checkbox inside the form flow, not an instant-effect switch.
Common use cases
Settings screens are switch territory: notification preferences, privacy options, and feature flags all map to instant on and off rows. A typical settings page stacks switch rows inside a field layout with labels and descriptions, or presents each option as a bordered card row, both patterns included in the examples above.
Admin dashboards toggle entity state the same way, publishing a post, activating a user, or enabling an integration directly from a table row. Complete settings pages built from these rows ship in our blocks library.
Choosing between switch, checkbox, and toggle
Use a checkbox when the choice is submitted with a form, and a toggle button when the control is a pressed tool in a toolbar, such as bold in an editor. The switch is specifically for settings that take effect the moment they change.
Radix UI and Base UI support
By default the component wraps the Radix UI Switch primitive, which supplies the switch role, keyboard handling, and hidden input for forms. Base UI publishes an equivalent Switch with a matching root and thumb anatomy, so the Tailwind CSS styling from the shadcn/ui switch docs transfers directly, and every example here runs on either primitive.