Switch
BetaBatch B. Turn a setting on or off. The change takes effect right away.
When to use
Use for a setting that applies right away, like turning alerts on.
When not to use
In forms that need a submit button, use Checkbox.
Anatomy
Applies right away.
Set by your administrator.
Archived rows are hidden.
- Track, 32 by 20px
- Thumb, 16px
- Label
- Help text
Variants
One style. If a change needs a Save step, use Checkbox instead.
States
Pictures of each state. Use the live example on the Code tab to try the component.
| Default | Hover | Focus-visible | Pressed | Disabled | Read-only | |
|---|---|---|---|---|---|---|
| off | ||||||
| on |
The off track uses background.neutral.bold, which passes 3:1 on every surface. On hover it uses content.secondary.