Switch

Forms

A toggle switch for binary on/off choices. Use switches for settings that take effect immediately without requiring a form submission.

Import

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

Standard toggle switch

Enable feature

Switch with controlled state

Disabled

Common settings toggle patterns

Email notifications

Push notifications

Marketing emails

Dark mode

Switches in disabled state

Disabled off

Disabled on

Prop	Type	Default	Description
`label`	`string`	—	Label text displayed next to the switch
`checked`	`boolean`	—	Controlled checked state
`defaultChecked`	`boolean`	false	Initial checked state (uncontrolled)
`disabled`	`boolean`	false	Whether the switch is disabled
`onChange`	`(e: ChangeEvent) => void`	—	Handler called when state changes