'/%3e%3cg%20transform='translate(170%20205)%20scale(0.3606)'%20fill='%23111011'%3e%3cpath%20d='M497%20640H359L248%20320%20122%20640H0L256%200z'/%3e%3cpath%20d='M292.43%20640H200.8L248%20522z'/%3e%3cpath%20d='M335%200h138l111%20320L710%200h122L576%20640z'/%3e%3c/g%3e%3c/svg%3e){kind=small}
Forms
Switch
An on/off setting that applies right away.
Ant Design: Switch
import { Switch } from '@alea/ui';
Examples
Switch
Applies right away.
Settings rows
Label on the left for lists of settings.
Props
Switch props
An on/off setting that applies right away.
| Prop | Type | Default | Description |
|---|---|---|---|
description | ReactNode | - | Help text under the label. |
labelPosition | "start" | "end" | 'end' | Label on the left (settings rows) or the right (default). |
size | "sm" | "md" | 'md' | sm (32 × 20) or md (40 × 24, default). |
Accessibility
- Role switch: announced as on or off.
Keyboard
| Key | Does |
|---|---|
| Space | Toggles it |
Do and don't
Do
- Name what is turned on, not the action: Dark mode.
Don't
- Don't use in a form that needs Save: use Checkbox.