# Toggle or checkbox?

[Website version](https://patterns.alexanderclaes.com/patterns/toggles-or-checkboxes/)

Updated 30 October 2026

Use toggles for immediate on/off settings. Use checkboxes for selections, agreements, or choices saved together.

## 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](https://www.carbondesignsystem.com/building-blocks/core/components/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](https://www.w3.org/WAI/ARIA/apg/patterns/switch/). [How we choose sources](https://patterns.alexanderclaes.com/about/#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

[View the example on the website](https://patterns.alexanderclaes.com/patterns/toggles-or-checkboxes/#example).

## Implementation

1. Give the control a visible, clickable label describing the setting. Keep that label unchanged when the state changes.
2. 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.
3. Keep the control reachable with Tab, operable with Space, and visibly focused. Enter support for a switch is optional.
4. Make on and off visually distinct beyond color. Match the appearance and exposed role to the control’s meaning.
5. 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?

## References

- [W3C APG · Switch pattern](https://www.w3.org/WAI/ARIA/apg/patterns/switch/)
- [W3C APG · Checkbox pattern](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/)
- [W3C APG · Switch using an HTML checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/switch/examples/switch-checkbox/)
- [IBM Carbon · Toggle guidelines](https://www.carbondesignsystem.com/building-blocks/core/components/toggle/guidelines)

## Related patterns

- [Toast, banner, or inline message?](https://patterns.alexanderclaes.com/patterns/toast-or-banner.md)
- [Select menu or radio buttons?](https://patterns.alexanderclaes.com/patterns/select-or-radios.md)