A switch controls the state of a single setting on or off.
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.
- Track: The container that holds the handle.
- Toggle: The movable element that turns the setting on or off. Sometimes called handle.
- State descriptor: Active and Inactive text that describes the selected state of the switch.
- Label: Text that describes what the switch controls when selected.
- Hint text (optional): Provides additional help or context about the element being toggled.
Open the component in Figma.
Use a switch in these scenarios:
- Use to immediately activate or deactivate a specific, standalone setting or item.
- Use if there are two binary options that are on or off.
- Use if the items in a list can be independently controlled.
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.
Use a default switch in forms and full pages that aren’t space restricted.
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.
Switches have five states: on, off, focus, and disabled.
The active state is when the switch has active selected.
The inactive state is when the switch has inactive selected.
The focus state displays the hover state with an additional highlight ring to visualize the interaction more easily when navigating with a keyboard.
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 layout continuity and communicate that an action may become available later.
Note: Switch doesn’t have an error state. Since a binary choice is required, the toggle will either be on or off, and neither is an error.
For right-to-left (RTL) languages, the layout 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.
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.
- Describe what the switch controls when selected (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.
Adds context to the label and helps users understand the binary choice they need to make.
- 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 necessary.
- Don’t restate the same information in the label to prompt users to interact with it.
- Don’t add hint text only to maintain layout continuity with other inputs that require hint text.
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.