Toggle

A toggle will let users activate or deactivate a control, like an on/off switch.

What the component handles

  • Checkbox semantics with proper checked/unchecked states

What you need to provide

  • aria-label with descriptive text (e.g., "Enable notifications") OR aria-labelledby referencing an existing label element
  • Additional ARIA attributes when needed (e.g., aria-describedby for help text, aria-controls if the toggle controls other elements)

Color contrast

Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:

  • background.static.xxx tokens except for background.static.inverse and background.static.on-color
  • in all Card variants,
  • in Banner components.