Components
Toggle
A two-state button that can be either on or off, providing users with a clear way to switch between binary states.
Toggle buttons are interactive components that allow users to switch between two mutually exclusive states: on and off. They provide immediate visual feedback about their current state and are ideal for settings, preferences, or any binary choice where the user needs to understand the current state at a glance.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use toggles for binary states like enabling/disabling features, showing/hiding content, or switching between two modes. |
| Content | Use clear labels, icons, or both to communicate the toggle’s purpose and current state. |
| Behavior | Provide immediate visual feedback when the state changes, with smooth transitions between states. |
| States | Ensure clear visual distinction between on/off states, with appropriate hover, focus, and disabled states. |
| Feedback | The toggle should clearly indicate its current state without requiring additional text or indicators. |
| Examples | Feature toggles, visibility controls, format options (bold, italic), or mode switches (light/dark theme). |
Best Practices
- Clear State Indication: Ensure the on and off states are visually distinct through color, iconography, or visual styling.
- Consistent Behavior: Toggle state should change immediately upon interaction with clear visual feedback.
- Appropriate Sizing: Use consistent sizing that provides adequate touch targets for all users.
- Meaningful Labels: Provide descriptive labels or aria-labels that clearly communicate the toggle’s purpose.
-
Logical Grouping: When using multiple toggles, use the
ToggleGroupcomponent to group related toggles together with appropriate spacing.
Do’s and Don’ts
Do
- Use toggles for binary states that take effect immediately.
- Provide clear visual feedback for state changes.
- Use consistent sizing and styling across your interface.
- Include descriptive labels or aria-labels for accessibility.
Don't
- Use toggles for actions that require confirmation or have consequences.
- Make state changes too subtle or unclear.
- Use toggles for mutually exclusive options with more than two states.
- Rely solely on color to indicate state.
Additional Guidance
- Accessibility: Toggles must be keyboard accessible, provide proper ARIA attributes, and clearly communicate their state to screen readers.
-
Psychological Impact:
- Immediate Feedback: Toggles provide instant gratification through immediate state changes, building user confidence.
- Control Perception: Users feel in control when they can easily switch between states with clear visual feedback.
- Cognitive Load: Well-designed toggles reduce cognitive load by clearly showing both the current state and the available alternative.