Switch
Toggle switch for binary settings. Use for on/off states, feature flags, and preference toggles.
Installation
$ npx shadcn@latest add switchPreview
Usage (React/TSX)
"use client"
import { useState } from "react"
import { Switch } from "@/components/ui/switch"
export default function Settings() {
const [enabled, setEnabled] = useState(false);
return (
<div className="flex items-center gap-3">
<Switch checked={enabled} onCheckedChange={setEnabled} />
<span>Enable notifications</span>
</div>
)
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | false | Whether the switch is on. |
| onCheckedChange | (checked: boolean) => void | — | Callback when the switch is toggled. |
| disabled | boolean | false | Disables the switch. |
| className | string | — | Additional CSS classes to apply. |