Shadcn Switch

Q: How do I pair a switch with a label?

Use Label with the same id as the switch's id prop: ` Enable Notifications `.

Browse 14 production-ready shadcn switch components for boolean toggles, settings panels, and feature flags. Shadcn Switch is built on Radix UI primitives and fully compatible with Shadcn Create style options.

For AI Agents

Hand your agent this brief or the ReUI MCP, not a screenshot. Free to install.

When to use

Single on or off preferences beside a label, such as airplane mode, sign in security or an AI feature
Grouped notification, privacy and editor preferences in a card, a Frame panel or a dense list
Options with a supporting sentence set as clickable tiles, including a risky one that erases data

When not to use

A complete options page with account, security and notification sections ready to drop in: use the Settings blocks
A row of pressed buttons that picks a view, an alignment or a time range: use the Toggle Group component
A consent or terms box that is ticked and sent along with a form: use the Checkbox component

Agent notes

Every Switch here is uncontrolled, seeded by defaultChecked or left off, and nothing reads a flip back; control it to save the setting
No example gives Switch a name, so a native form submit carries none of these values; add one when the switch sits inside a form

Markdownhttps://web.dev.reui.io/components/switch.md

MCPget_component("switch")

Installnpx shadcn@latest add switch

Full index for agents:llms.txtReUI MCP setup

Shadcn Switch: Toggle Control for React Forms

Shadcn Switch is a boolean control that toggles between checked and unchecked states. Built on Radix UI primitives, it follows WAI-ARIA switch semantics and keyboard navigation so screen readers announce state and keyboard users can toggle via Space or Enter.

Use in settings panels, feature flags, notification preferences, and form checkboxes where yes/no or on/off semantics are clearer than Shadcn Checkbox. Shadcn Create style options apply to switch colors and sizing so your design tokens flow into exported code.

ReUI lists switch components inside preference panels, settings dashboards, and form layouts so you evaluate label placement, spacing, and state clarity next to real workflows. The sections below explain what it is, why teams use it, which features matter, and how it pairs with other components.

What is Shadcn Switch?

A switch is a control that toggles a boolean value on and off. Unlike a Shadcn Checkbox, a switch explicitly conveys an on/off or enabled/disabled state. Shadcn Switch uses the Radix UI Switch primitive, which manages focus, keyboard input, and live region updates for assistive tech.

Components here show switch with labels, descriptions, and disabled states inside settings panels, form groups, and feature toggles. They help you decide whether a switch or checkbox is clearer for your use case and where to place the label for scanning.

Why Use Shadcn Switch?

Teams use switches for settings and feature flags where the semantic is clearly on/off or enabled/disabled. Switches feel more intuitive than checkboxes for toggles because the visual design conveys state change.

The layouts on this page show how to pair switches with labels, descriptions, and form validation.

Shadcn Switch Features

Radix UI Foundation. Built on Radix UI Switch primitive. Handles keyboard navigation, focus management, and ARIA attributes automatically.
Boolean State. Checked/unchecked or enabled/disabled. Use with React state or form libraries like React Hook Form for validation and submission.
Label Association. Pair with Shadcn Label via htmlFor attribute so clicking the label toggles the switch and screen readers associate them.
Disabled State. Set disabled prop to prevent user interaction. Style the disabled switch differently so users understand it's not available.
Size and Color Variants. Customize via Tailwind utilities and Shadcn Create style options so switches match your design system's colors and sizing.

Pair switches with Shadcn Label and Shadcn Field so labels, descriptions, and error states stay organized in a settings panel or form.

Place switches inside Shadcn Card sections for grouped preferences (e.g., Email notifications, In-app notifications, Push notifications).

Combine switches with Shadcn Button to save settings or apply changes. Use Shadcn Sonner or Shadcn Alert to confirm the toggle was saved.

Form Blocks in ReUI Pro

The free examples above pair with 12 production ready form blocks in ReUI Pro, complete sections built on the same primitives and ready to copy into your app.

Form (12 blocks)Form layouts for settings, profiles, and data entry with validation and grouped fields.

Browse all Application blocks

Frequently Asked Questions

Should I use a switch or a checkbox for a boolean form field?

Use Checkbox for affirmations (I agree to terms). Use a switch for toggles that clearly imply state change (Enable notifications, Dark mode). Context matters more than the component choice.

How do I pair a switch with a label?

Use Label with the same id as the switch's id prop: <Label htmlFor="notifications">Enable Notifications</Label><Switch id="notifications" />.

Can I use a switch with React Hook Form for form validation?

Yes. Use useController or register to bind the switch to form state. The switch onChange callback updates the field value. On form submit, the boolean value is included in the payload.

Should I show a description under a switch label?

Yes, especially for settings. Use a Field component with FieldDescription to explain what the toggle does (e.g., 'Send notifications when someone comments on your post').

When should a switch take effect immediately vs on form submit?

Immediate effect works for settings you want to apply right away (theme toggle, notification preference). Form submit works for multi-field forms where you gather all changes before persisting. Use onChange callbacks for immediate saves.

Is a switch keyboard accessible?

Yes. Tab to focus the switch, then Space or Enter to toggle. Radix UI handles all keyboard semantics. Ensure the label is clickable and the switch announces state to screen readers.

Start building with ReUI Pro today.

Every Pro block, every style, and every future addition, with one license for unlimited projects.

Get All-Access

From $249, once. Lifetime updates.