Interactive — click to toggle
All switches are live
Fill colors
color prop — 4 options, only visible when on
States
off · on · disabled off · disabled on
Switch vs Checkbox
Choosing the right component
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| checked | boolean | — | Controlled on/off state. |
| defaultChecked | boolean | false | Initial state for uncontrolled usage. |
| onChange | (checked: boolean) => void | — | Called with the new state on toggle. |
| label | string | null | Inline label — clicking it also toggles. Renders a flex wrapper when provided. |
| color | "violet"|"lime"|"pink"|"neon" | "violet" | Track fill color when on. |
| disabled | boolean | false | Mutes to 45% opacity, disables interaction. |
| style | CSSProperties | {} | Merged onto the root element. |
Usage
import { Switch } from "components/forms/Switch";
// Uncontrolled with label
<Switch label="Enable notifications" />
// Controlled
<Switch
checked={darkMode}
onChange={setDarkMode}
label="Dark mode"
color="lime"
/>
// No label (standalone)
<Switch checked={active} onChange={setActive} />