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:
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, active
Large
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, hover
Inactive, focus
Inactive, disabled
Active
Active, hover
Active, focused
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.
Do
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.
Don't
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