Switch

 

A switch controls the state of a single setting on or off.

Overview

A switch, also known as a toggle, is used to make a binary selection. Users can only select one of the two options. For example, on and off or true and false. Interacting with a switch should make the selection immediately without needing to save.

Anatomy

Switch Anatomy

 

  1. Track: The container that holds the handle.
  2. Handle: The movable element that turns the setting on or off. Also called toggle.
  3. Label: Text that describes what the switch controls when selected.
  4. Hint text (optional): Provides additional help or context.

Demo

Storybook failed to load. Please connect to the VPN to access.

Open the component in Figma.

When to use

Use a switch in these scenarios:

  • To immediately activate or deactivate a specific, standalone setting or item.
  • If there are two binary options that are on or off.
  • If the items in a list can be independently controlled.

When not to use

If the setting is dependent on other settings, uses progressive disclosure, or has options that are not a binary on or off, use a different type of input for these scenarios:

​​Use a radio group instead:

  • When you need a single selection and don’t want to allow any other related selection.
  • When you need an active item by default. Radio buttons aren’t independent like checkboxes.
  • When you require a positive action, like submit or save.
  • When you require more than two actions.

Use a checkbox instead:

To allow multiple options to be selected. Checkboxes are independent of other checkboxes and multiple options can be selected at the same time.

Behaviors

Switches can either be selected or not selected. They can’t be in an indeterminate state.

  • When a switch is toggled, its handle size changes and the corresponding action takes effect immediately.
  • A switch is successfully toggled when the handle slides to the other side of the track after an interaction.

States

Active

The active state is when the switch is on.

On State

Inactive

The inactive state is when the switch is off.

Off state

Focus

The focus state displays the hover state with an additional highlight ring to visualize the interaction more easily when navigating with a keyboard.

Focus state

Disabled

The disabled state indicates:

  • A selection has already been made outside of the current context that negates the need for the switch.
  • A selection exists, but is not available in that circumstance. This can be used to maintain continuity and communicate that an action may become available later.
Disabled state

 

Note: Switch doesn’t have an error state. Since a binary choice is required, the handle will either be on or off, and neither is an error.

Internationalization

​​RTL

For right-to-left (RTL) languages, the presentation of the switch is mirrored. The track is placed on the right side of the label and the handle is positioned to the left when the switch is turned on.

RTL

Accessibility

Odyssey components are designed and built to meet accessibility requirements out of the box. So, designers and engineers can focus on any accessibility concerns unique to their problem areas.

Our components meet WCAG 2.2 AA criteria and WAI-ARIA guidelines to provide a usable and accessible experience to everyone. See the accessibility guidelines for Switch.

Content guidelines

Label

  • Describe what the switch controls when on.
  • Don’t change the switch’s label based on its state.
  • Make the label as descriptive as possible. This reduces the need for different accessibility text.
  • Use one to three words.
    • If your setting needs more context, use hint text to provide it.
  • Use a neutral, utilitarian tone.
  • Don’t use end punctuation.
  • Use sentence case.

 

Label construction options

  • Try to keep switches consistently using either verbs or nouns if you have more than one of them in a single view or screen.
  • Begin with a noun or proper noun to describe the name of the feature or setting that’s on or off. For example, Test mode or Automatic order archiving.
    • Tip: Say the noun-based label out loud and then “on” and “off.” If it makes sense, the label is clear.
.

.

.

.

.

.

.

.

 

  • Phrase the label as a verb only if it helps with clarity to explain what the feature or setting will do. For example, Enable dark mode or Allow pull requests.
.

.

.

.

  • Rarely, the label may need to refer to the user to be clear and specific.

For example, Show your unresolved comments.

 

Hint text

Adds context to the label and helps users understand the binary choice they need to make.

  • Optional.
  • Be concise. Try to use one short sentence. For example, Activating updates will appear on the end-user dashboard and browser plugin.
  • A link can be included. For example, Activating updates will appear on the end-user dashboard and browser plugin. Learn more about end-user communications.
    • Use an external link icon when linking to an external domain. For example, when linking from the Admin Dashboard to help.okta.com. The icon is automatically appended any time you specify that the link should open in a new tab.
  • Don’t restate the same information in the label to prompt users to interact with it.
  • Don’t add hint text only to maintain continuity with other inputs that require hint text.

Content accessibility

Switches should always include a label describing what that the switch controls when selected. The accessibility label for a switch uses the adjacent label text if implemented correctly. Screen readers will read the UI text followed by the component’s role.

Some accessibility labels require more descriptive text when the visible UI text is ambiguous. For example, a switch visibly labeled Photo album needs additional information in its accessibility label to clarify the switch’s function.

The default ARIA labels are on and off.

Figma: Switch