Switch

Switch provides "on" and "off" choices and can be useful for opt-in and additive actions.

Overview

Switches should be used for boolean and "on" and "off" choices. They should not be for binary choices such as "1 or 2", "blue or red", "sky or ground", "miles or kilometers", "large or small", etc.

For "yes" and "no" interactions, multiple selections, and interactions where a choice is optional, please consider Checkbox.

For single choice interactions, please consider Radio Button or Segmented Control.

Usage

  • Dark mode switch
  • Layer visibility

Sample

Best practices

Below are important guidelines on using the Switch component.

Correct Switch decision
Do use Switches to indicate a boolean or reciprocal relationship
Avoid Switch decision
Avoid using Switches to indicate a choice between similar options

Accessibility

Switch should include a label property value, or be accompanied by a Label, which provides context of the intent to support assistive technologies.

Keyboard navigation

KeyFunction
TabMoves focus in or out of component.
Tab and ShiftMove focus in or out of component.
EnterToggles the component.
SpaceToggles the component.

Writing and copy

Keep labels for Switches succinct. Do not use contractions such as "you're", "aren't", "can't", and "haven't" for Switch labels in order to reduce confusion. Avoid writing Switch text as a question.

A label for a Switch should be supporting "On" as additive, not subtractive. For example:

  • Show layer
  • Enable editing
  • Allow credit usage
  • Display controls
  • Update automatically

API reference

Properties

Events

Methods

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.