Components
Switch
A toggle control for settings that take immediate effect, like enabling/disabling a feature.
Overview
Switch is a toggle control that represents an on/off state. Unlike Checkbox, it implies that the change takes effect immediately. It uses role="switch" on a <button> element for proper accessibility.
Interactive
Sizes
Usage
export function Example() {
return <Switch label="Dark Mode" onCheckedChange={setDarkMode} />;
}Sizes
<Switch label="Small" size="sm" />
<Switch label="Medium" size="md" />
<Switch label="Large" size="lg" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | — | Label text (required) |
checked | boolean | — | Controlled state |
defaultChecked | boolean | false | Uncontrolled default |
onCheckedChange | (checked: boolean) => void | — | Change handler |
size | 'sm' | 'md' | 'lg' | 'md' | Switch size |
Related Components
| Component | When to Use Instead |
|---|---|
| Checkbox | Change requires form submission |