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

label—

string

Label text displayed next to the switch

checked—

boolean

Controlled checked state

defaultCheckedfalse

boolean

Initial checked state (uncontrolled)

disabledfalse

boolean

Whether the switch is disabled

onChange—

(e: ChangeEvent) => void

Handler called when state changes

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