Skip to main content

Switches

Switches are used to toggle functionality.

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.

Example

Settings
  • Wi-Fi
  • Bluetooth
  • Notifications
  • Dark Mode
Switches work well as toggles for functionality, as in this settings panel example.

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.
Your Allergies (click all that apply)
Don't use switches for multi-selections within forms. These are best served by Checkboxes instead.
What's changed
Date Version Notes Contributors
11/23/2020 1.0.0 Border color changed to be accessible. White background added for emphasis. E. Bohn, L. Kause, N. Springer
Last updated September 2, 2024.