Switches

Overview

Switches are selection controls that yield instantaneous actions. They have an on and off setting.

Usage

Use when

• Turning on and off a feature, mode, or functionality.
• Toggling elicits an immediate change in the UI.
• Toggling elicits a change in background behavior without affecting the UI.
• You want to trigger a state change directly when you toggle it.

Don’t use when

• Requiring user action consent, such as accepting terms and conditions. Instead, use a Checkbox.
• Requesting multiple choices from a group of options. Instead, use a Checkbox group.
• Users need to select one item from a list of options. Instead, use a Radio Button.

Specifications

• A switch must have a visible label that clearly conveys what option a user will turn on or off.

Behaviors

• Avoid changing the label text based on on and off state.

Editorial

• Avoid acronyms.
• Use 2-5 words.
• Use the same label text for on and off states

Accessibility

• The switch has role switch.
• The switch has an accessible label provided by one of the following:
  • Visible text content contained within the element with role switch.
  • A visible label referenced by the value of aria-labelledby set on the element with role switch.
  • aria-label set on the element with role switch.
• When on, the switch element has state aria-checked set to true. When off, it has state aria-checked set to false.
• When the switch is in focus, pressing the “Space” key changes the state of the switch.
• Use a fieldset to create a switch group.