Default
Apply a setting immediately
The complete row is clickable. The native control exposes Switch semantics and announces its current state.
Sizes
Match the surrounding density
Medium is the default. Small supports compact desktop settings, while Large gives prominent controls more presence.
Settings list
Group related controls without hiding them
Card treatment separates settings while preserving one direct interaction per row.
States
Make availability and progress explicit
Disabled settings cannot change. A busy state keeps the current value visible while a server update completes.
Content
Name the state that becomes active
Use a short noun phrase such as “Project notifications.” The Switch itself communicates on or off, so avoid labels that contain both states.
Usage guidance
Use Switch only for immediate changes.
Use Checkbox when the choice belongs to a form that the user submits later. Describe the effect before the control changes it.
Next component: Card