Switch

A binary setting control for changes that take effect immediately.

Use Switch for immediate on or off settings. Use Checkbox when values are collected and submitted together.

Notifications off

Controlled switch

Installation

$npx shadcn@latest add @patchui/switch

The copied source is available in the registry JSON. The canonical implementation lives in packages/react/src/components/switch.tsx.

<Switch aria-label="Enable notifications" />

The on state uses the monochrome ink token. Use Toggle for toolbar controls represented through aria-pressed.

Keep the setting label stable while switch semantics communicate whether it is on or off.

Compact mode

Availability

Archived setting

Size, icons, and disabled state

Switch accepts the underlying Base UI switch props. These fields add Patch UI behavior.

Prop	Type	Default	Description
checked / onCheckedChange	boolean / (checked: boolean, details) => void	-	Controls the active state.
defaultChecked	boolean	false	Sets the initial uncontrolled state.
size	"sm" \| "md" \| "lg"	"md"	Selects a track and thumb size preset.
icon	{ checked?: ReactNode; unchecked?: ReactNode }	-	Adds state-specific icons inside the thumb.

Give every Switch a visible label or aria-label describing the setting.
The label should describe the setting, while switch semantics announce its current state.
Do not use Switch for destructive actions that require confirmation.

Related: Toggle