Switch

A binary control that lets users turn an option on or off.

#Installation

npx @dinachi/cli@latest add switch

tsx

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

A basic switch toggle

Airplane Mode

Switch with controlled state and status display

Dark Mode

Status: Disabled

Switches in different states including disabled

Notifications (on)

Marketing emails (off)

Disabled

Prop	Type	Default	Description
checked	boolean	—	The controlled checked state.
defaultChecked	boolean	false	The initial checked state when uncontrolled.
onCheckedChange	(checked: boolean) => void	—	Callback fired when checked state changes.
disabled	boolean	false	Disables the switch.
required	boolean	false	Marks the switch as required in a form.