Switch

A control that allows the user to toggle between checked and not checked.

Airplane mode

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

<div className="flex items-center gap-3">
  <Switch id="airplane-mode" />
  <label htmlFor="airplane-mode">Airplane mode</label>
</div>

Disabled

The switch can be disabled to prevent interaction.

Disabled

<div className="flex items-center gap-3">
  <Switch id="disabled-switch" disabled />
  <label htmlFor="disabled-switch">Disabled</label>
</div>

API Reference

Prop	Type	Default	Description
checked	boolean	—	The controlled checked state of the switch
defaultChecked	boolean	false	The checked state when initially rendered
onCheckedChange	(checked: boolean) => void	—	Callback when the checked state changes
disabled	boolean	false	When true, prevents the user from interacting with the switch
required	boolean	false	When true, indicates the switch must be checked for form submission
name	string	—	The name of the switch used when submitting a form
value	string	"on"	The value given as data when submitted with a name

Accessibility

The Switch component follows WAI-ARIA switch patterns:

• Uses role="switch" with proper aria-checked state
• Supports keyboard interaction (Space to toggle)
• Can be associated with a label via htmlFor / id pairing
• Focus ring is visible for keyboard navigation