Design System
Switch
Switches allow users to toggle between on and off states. They provide a clear visual indication of boolean settings.
Basic Usage
Switches are controlled components that require state management for interactive use.
Controlled Switch
Off
States
Switches support checked, unchecked, and disabled states.
Checked
Unchecked
Disabled
Usage
"use client";
import { Switch } from "@/components/ui/switch";
import { useState } from "react";
export function MyComponent() {
const [enabled, setEnabled] = useState(false);
return (
<div className="flex items-center gap-2">
<Switch checked={enabled} onCheckedChange={setEnabled} />
<label>Enable notifications</label>
</div>
);
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
checked | boolean | - | Whether the switch is checked |
onCheckedChange | (checked: boolean) => void | - | Callback fired when checked state changes |
disabled | boolean | false | Whether the switch is disabled |