Toggle
Examples
Anatomy
How to use
When to use
- To allow users to switch a feature or setting on and off.
- When the two states are mutually exclusive.
- For settings that take effect immediately without needing to save or confirm.
- When providing immediate feedback is essential for user interaction.
When not to use
- When there are more than two options to choose from.
- For actions that require a confirmation step before taking effect.
- When the state change is not immediately visible or does not have an immediate impact.
- In place of a checkbox or radio button for simple selections.
Alternative components:
- Checkbox: Use when you need to select or deselect multiple options.
- Radio Button: Use when you need to select one option from a group of three or more.
- Button: Use for actions that need to be submitted, saved, or confirmed.
Accessibility
- Labeling: Ensure the toggle has an accessible label describing its purpose and current state.
- Keyboard Navigation: Make sure the toggle can be focused and toggled using keyboard controls (typically the spacebar).
- Visual Focus: Provide a visible focus indicator when the toggle is selected via keyboard.
- State Indication: Clearly indicate the toggle’s state through visual means and text labels, if necessary, to aid users with visual impairments.
- Screen Readers: Ensure that screen readers announce the state change when the toggle is activated. Use ARIA attributes (e.g.,
aria-checked) to communicate the state to assistive technologies.