FORMS

Switch

Memphis toggle: square thumb sliding between an ivory and a primary track. Use for boolean preferences that take effect immediately (notifications on / off, dark mode on / off). Built on Radix Switch.

Import

import { Switch, Label } from '@/components/ui/switch'

Switch + label

Email notifications

1<div className="flex items-center gap-3">
2  <Switch id="notify" />
3  <Label htmlFor="notify">Email notifications</Label>
4</div>

States

1<Switch defaultChecked />
2<Switch defaultChecked={false} />
3<Switch disabled />
4<Switch defaultChecked disabled />

Props

Switch props

Prop	Type	Default	Description
checked	boolean	—	Controlled checked state. Pair with `onCheckedChange`.
defaultChecked	boolean	—	Uncontrolled initial checked state.
onCheckedChange	(checked: boolean) => void	—	Fires whenever the checked state changes.
disabled	boolean	—	Disables the input.
name	string	—	Name attribute for native form submission.
value	string	—	Submitted form value when checked. Defaults to `"on"`.

Switch vs Checkbox

Use Switch when toggling a setting takes effect immediately (push notifications, dark mode).
Use Checkbox when the value is part of a form that gets submitted (accept terms, select preferences).

Accessibility

Renders role="switch" with aria-checked reflecting on/off state.
Always associate a visible label or pass aria-label.
Keyboard: Space toggles.

← RadioGroup Slider →