Inputs / Switch
Switch
The knob is a little face. It sleeps when off and wakes up when you flip it on.
Client componentWCAG AASince v0.1
import { Switch } from "@plop-ui/react";
<Switch checked={sharing} onCheckedChange={setSharing} color="mint">
Share live location
</Switch>Change every prop live in the playground.
Props
| Prop | Type | Default | What it does |
|---|---|---|---|
| aria-label | string | none | Accessible name when there is no visible label. |
| checked | boolean | false | Controlled state. |
| children | ReactNode | none | The label. Clicking it toggles the switch. |
| className | string | none | — |
| color | "ink" | "mint" | "tomato" | mint | Track color when on. |
| defaultChecked | boolean | false | Uncontrolled initial state. |
| disabled | boolean | false | — |
| id | string | none | — |
| name | string | none | — |
| onCheckedChange | (checked: boolean) => void | none | — |
| required | boolean | false | — |
| value | string | none | — |
Use it well
DoUse it for settings that take effect right away.
Don'tUse it inside a form that needs a Save button. That's a Checkbox.
Accessibility
- Built on the Radix Switch: role="switch" with aria-checked.
- Clicking the label toggles it; Space and Enter work from the keyboard.
- On and off also show in the knob's position and face, not only color.