On this page
Overview
Show code, NotificationSettings.tsx
Anatomy
Switch
Track
Label
Show code, SwitchAnatomy.tsx
Behaviour
States
Pressing the track or its label toggles it.
Apply at once
The setting applies as soon as the switch changes, with no Save button.
- When saving it fails, the switch goes back, with a message that says what went wrong.
Show code, ShowCompleted.tsx
Settings in a list
In a row, the row's title names the switch, and its detail describes it.
Show code, SettingsRows.tsx
Adapting to width
The label wraps beside the track.
Show code, LongLabel.tsx
Rules
Name the setting in a short phrase, so that on means yes.
Use it when
- A setting that applies at once, such as e-mail notifications
- One setting in each row of a settings list
Show code, SameLabel.tsx
Show code, StateInLabel.tsx
Disabled
A disabled switch keeps its setting from changing. It fades whole with its label, so one that is on keeps its fill and its thumb at the end, faded, and still reads as on.
- Say why beside it, such as in the row's detail, and who can change it.
Accessibility
| Key | Action |
|---|---|
| Tab, Shift+Tab | Moves to the next or previous switch. |
| Space | Turns the switch on or off. |