Skip to main content

Toggle

Instantly change an item's on/off state.

View in StorybookExternal link icon

Variants​

  • With label.
  • Without Label.
  • On, Off.

Usage​

  • Use a Toggle when the user needs to make a binary choice, yes/no or On/Off scenarios such as enabling or disabling a setting.
  • Use settings that reflect an immediate state change without requiring additional confirmation.

Accessibility​

Keyboard focus​

  • The keyboard focus state replicates the Checkbox's visual hover state and adds a 2px ring.
  • For the focus ring, use a colour from the Brand primary palette (default: Primary/500).
  • Ensure the focus state has a minimum contrast ratio of 3:1 against the background for accessibility compliance.

Keyboard interactions​

See the ARIA Authoring Practices Guide: Checkbox Pattern for guidance on expected keyboard interactions, including roles, labels, and properties.

Resources​

Refer to Understanding 2.1.1 Keyboard for more information on expectations, intent, benefits, and techniques.