ComponentClient component

Switch

An accessible, animated control for toggling a boolean setting.

Installation

Preview

Product updates

Occasional release notes.

Usage insights

A weekly digest.

Usage

tsx

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

export function SwitchDemo() {
  return <Switch aria-label="Enable notifications" defaultChecked />
}

API reference

Prop	Type	Default	Description
`checked`	`boolean`	`—`	Controlled checked state.
`defaultChecked`	`boolean`	`false`	Initial state when uncontrolled.
`onCheckedChange`	`(checked: boolean) => void`	`—`	Runs whenever the state changes.
`disabled`	`boolean`	`false`	Prevents interaction.