Docs › Components › Switch

Shadcn Switch

The shadcn/ui Switch is a copy-paste toggle for a single on/off setting, styled with Tailwind CSS v4. Built on accessible primitives, it is keyboard-operable and works controlled or uncontrolled. Switches appear in settings panels and preference forms across ShadcnStore blocks.

Key features

• Single on/off toggle with an accessible switch role.
• Controlled or uncontrolled via checked / defaultChecked.
• Keyboard operable (Space and Enter) with clear focus styles.
• Pairs with a Label for an accessible name.

Installation

npx shadcn@latest add switch

Usage

import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"

export function Example() {
  return (
    <div className="flex items-center gap-2">
      <Switch id="airplane" />
      <Label htmlFor="airplane">Airplane mode</Label>
    </div>
  )
}

Controlled state

const [on, setOn] = useState(false)

<Switch checked={on} onCheckedChange={setOn} />

Props

Prop	Type	Default	Description
checked	boolean	—	Controlled on/off state.
defaultChecked	boolean	false	Uncontrolled initial state.
onCheckedChange	(checked) => void	—	Fires when toggled.
disabled	boolean	false	Disable interaction.

Accessibility

• Associate a Label with the switch so it has an accessible name.
• The control exposes an on/off state to assistive tech; do not replace it with a plain styled button.
• Because a switch usually applies immediately, avoid pairing it with a separate save button for the same setting.

When to use the Switch

Use a Switch for a setting that turns on or off and takes effect right away: notifications, dark mode, or a feature flag. For choices submitted with a form, or for accepting terms, use a Checkbox. For one option among several, use a Radio Group.

Used in these blocks

• Apps: settings toggles.
• Widgets: preference switches.
• Checkout forms: save-info toggles.

Related components

A Switch sits in a settings Card or a Form beside a Label. For form-submitted selection use a Checkbox.

FAQ

What is the shadcn switch used for?

The Switch toggles a single setting on or off, such as notifications or dark mode, and usually takes effect immediately.

What is the difference between Switch and Checkbox?

Switch is for an immediate on/off setting. Checkbox is for selecting items or agreeing, often submitted as part of a form.

How do I control the switch state?

Pass checked and onCheckedChange to the Switch, or use defaultChecked for uncontrolled state.

Can I use a switch inside a form?

Yes. Wire it through the Form component like other fields, though switches typically apply immediately rather than on submit.