Input - Toggle

An boolean input control to switch between two opposing states

Known issues
Show details
Known issues
Published: February 21, 2024
Updated: February 21, 2024

Overview

Toggles are a form of input control that allow marketers to switch between two opposing states, such as on/off, enabled/disabled, or yes/no.

Design

Structure

A toggle input component typically consists of:

Example toggle
  • Track: The background element that displays the current state of the toggle, changing color to reflect the on/off status.
  • Thumb: The circular or oval button that marketers move to change the state of the toggle.
  • Label: Generally placed to the right of the toggle, that helps describe the input's function
  • Description: Supporting text that may be longer than the label the further describes the input's function
  • Slot: allows custom child content to appear when the toggle is set to active

 

Sizes

Small

Small

Small, active

Small, active

Large

Large

Large, active

Large, active

 

States

  • Active (On): Indicates that the feature or setting is enabled. The track typically appears in a brand or positive color.
  • Inactive (Off): Indicates that the feature or setting is disabled. The track is usually gray or neutral.
  • Disabled: The entire component appears faded, and interaction is blocked, indicating that the toggle is temporarily not available for use.
Inactive

Inactive

Inactive, hover

Inactive, hover

Inactive, focus

Inactive, focus

Inactive, disabled

Inactive, disabled

Active

Active

Active, hover

Active, hover

Active, focused

Active, focused

Active, disabled

Active, disabled

 

Guidelines

Use Cases

  • Enabling or disabling settings or features, such as Quiet Hours, Send Time Optimization, or Campaign Alerts.
  • Quick binary choices where marketers need to make a decision between two clear options.
  • A setting that can be turned on/off instantly without requiring a seperate form submission or save.

 

  • Use toggles for immediate action or preference settings that do not require additional confirmation.
  • Clearly indicate the effect of the toggle through visual cues or adjacent labels, ensuring marketers understand the result of their interaction.
  • Avoid using toggles for actions that require further confirmation or have irreversible consequences.
  • Do not use toggles when the choice is not binary; opt for dropdowns or radio buttons for selecting among multiple options.
  • Refrain from placing toggles in positions where they can be easily toggled by accident, especially in mobile interfaces.

 

Content

  • For toggles with labels, use concise, clear language that accurately describes the states or outcomes of the toggle.
  • Avoid lengthy descriptions next to a toggle. The element is rather small and can get lost in a body of text.

Accessibility

  • Keyboard Navigation: Toggles should be fully operable with the keyboard, allowing marketers to change their state using the Tab key to focus and the Enter/Space key to toggle.
  • Screen Reader Support: Use appropriate ARIA roles and properties (role="switch", aria-checked) to ensure the state of the toggle is communicated to screen reader users.
  • Focus Indicators: Provide clear visual cues to indicate when a toggle is focused upon with the keyboard, ensuring users who rely on keyboard navigation can interact confidently.
  • Contrast and Visibility: Adhere to WCAG guidelines for color contrast, ensuring that the toggle, its track, and any labels are easily distinguishable by all users, including those with visual impairments.

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Known issues