Components
Switch
A control that allows users to toggle between checked and unchecked states.
Basic Usage
Pair the Switch with a Label component for better accessibility and user experience.
import { Switch, Label } from "@epilot/volt-ui"
<div className="flex items-center gap-2">
<Switch id="notifications" />
<Label htmlFor="notifications">Enable notifications</Label>
</div>Variants & Sizes
The Switch component supports two visual variants and three sizes to match your design needs.
import { Switch, Label } from "@epilot/volt-ui"
<Switch variant="primary" size="sm" />
<Switch variant="primary" size="base" />
<Switch variant="primary" size="lg" />
<Switch variant="destructive" size="sm" />
<Switch variant="destructive" size="base" />
<Switch variant="destructive" size="lg" />API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
variant | "primary" | "destructive" | "primary" | The visual style variant of the switch. |
size | "sm" | "base" | "lg" | "base" | The size of the switch. |
checked | boolean | - | Controlled checked state of the switch. |
defaultChecked | boolean | false | Uncontrolled default checked state. |
onCheckedChange | (checked: boolean) => void | - | Callback fired when the checked state changes. |
disabled | boolean | false | When true, prevents the user from interacting with the switch. |
name | string | - | The name of the switch, used when submitting a form. |
value | string | "on" | The value of the switch when checked, used when submitting a form. |
showThumbIcon | boolean | false | Whether to show the thumb icon. |