Switch

A toggle control for binary on/off settings. Prefer Switch over Checkbox when the action takes effect immediately without requiring a form submit.

Examples

Email notifications

Marketing emailsReceive updates about new features and promotions.

Small

Medium

Email notificationsGet notified about activity.

Push notificationsReceive push alerts on mobile.

Weekly digestA summary of your week every Monday.

Disabled off

Disabled on

defaultChecked

boolean

Initial state (uncontrolled).

checked

boolean

Controlled checked state.

onCheckedChange

(checked: boolean) => void

Called when state changes.

size= 'md'

'sm' | 'md'

Track size.

label

string

Label text rendered next to the switch.

description

string

Secondary text below the label.

disabled

boolean

Prevents interaction.

string

Custom id for the input element.

Prop	Type	Default	Description
defaultChecked	boolean	—	Initial state (uncontrolled).
checked	boolean	—	Controlled checked state.
onCheckedChange	(checked: boolean) => void	—	Called when state changes.
size	'sm' \| 'md'	'md'	Track size.
label	string	—	Label text rendered next to the switch.
description	string	—	Secondary text below the label.
disabled	boolean	—	Prevents interaction.
id	string	—	Custom id for the input element.