Switch
A toggle control for turning settings or features on and off. Built on Base UI Switch for accessibility.
Unlike Checkbox, Switch is for changes that take effect immediately. It fits cases where settings are applied without a separate save action.
Preview
Examples
Intent
Controls the color intent of the switch track. Affects the color shown when the switch is on.
| Value | Default | Description |
|---|---|---|
primary | ✓ | General setting toggles. |
secondary | Secondary settings. | |
success | When activation has a positive meaning. | |
warning | When activation requires caution. | |
danger | When activation indicates a risky action. | |
neutral | Neutral toggles. |
Size
Controls the switch size.
| Value | Default | Description |
|---|---|---|
small | For dense setting lists. | |
medium | ✓ | General settings screens. |
large | When a larger click area is needed. | |
xlarge | When a large touch target is needed (e.g. mobile). |
Guidelines
Switch vs Checkbox
| Use case | Recommended |
|---|---|
| On/off takes effect immediately (no save) | Switch |
| Reflected on form submit | Checkbox |
| Multiple selection from many options | Checkbox |
| Single setting toggle | Switch |
Accessibility
Always provide a label via the label prop so screen readers can identify the purpose of the switch.
Props
Props
Prop
Default
Type
size?"medium""small" | "medium" | "large" | "xlarge"
intent?"primary""primary" | "secondary" | "success" | "warning" | "danger" | "neutral"
label?—
string
checked?—
boolean
defaultChecked?—
boolean
disabled?falseboolean
onCheckedChange?—
(checked: boolean) => void
name?—
string
required?—
boolean
readOnly?—
boolean
Last updated on