Sources take different approaches
Carbon uses toggles for changes that apply immediately. W3C APG defines switch semantics and keyboard behavior without prescribing when the application saves the setting. This guide already identifies immediate application as a design convention.
Preferred starting point: IBM Carbon · Toggle guidelines. Start with Carbon for the immediate-setting convention and APG for switch interaction. Keep a group of changes submitted together distinct from an immediately applied setting.
Compare: W3C APG · Switch pattern. How we choose sources.
Recommendation
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?