Prefer a toggle for a reversible on/off setting that applies immediately.
Problem
The user needs to turn an option on or off.
Use a toggle when
- A reversible preference such as enabling a notification category.
- The on and off states are clear and changes can be saved reliably.
Use a checkbox or button when
- Selections or agreements that belong to a form submission; use checkboxes.
- A partially selected group: switches have only on and off states; use a checkbox for a mixed state.
- An action with a destructive consequence; a labeled action and confirmation may be clearer.
Example
Notification preferences
The setting changes immediately in this example. It is not saved.
Implementation
- Give the control a visible, clickable label describing the setting. Keep that label unchanged when the state changes.
- A switch can use an input with type="checkbox" and role="switch". Read and update its checked property; custom switches need aria-checked kept in sync.
- Keep the control reachable with Tab, operable with Space, and visibly focused. Enter support for a switch is optional.
- Make on and off visually distinct beyond color. Match the appearance and exposed role to the control’s meaning.
- Show pending or failed saves. If a save is rejected, restore the last confirmed state, explain the failure, and offer a retry.
Tradeoffs
Immediate application is a common design convention, not an ARIA requirement. Checkboxes can also update immediately; choose semantics that fit the task. An explicit Save action makes the commitment point clear for changes submitted together.
Verification
Can users toggle with Space, hear the correct label and state, and tell whether a change has applied or still needs saving?