Components
Toggle Group
A group of two-state buttons that can be toggled on or off, allowing single or multiple selection.
Toggle groups are interactive components that allow users to select one or more options from a set of related choices. They combine the functionality of toggle buttons into a cohesive group, supporting both single and multiple selection modes. Toggle groups are ideal for formatting controls, view modes, or any scenario where users need to make selections from mutually exclusive or inclusive options.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use toggle groups for related options where users can select one or multiple items, such as text formatting or view options. |
| Content | Use clear, concise labels or icons that immediately communicate the function of each toggle option. |
| Behavior | Support both single selection (radio-like) and multiple selection (checkbox-like) modes based on user needs. |
| States | Provide clear visual feedback for active, inactive, hover, focus, and disabled states. |
| Grouping | Group related toggle options together and separate different groups with appropriate spacing. |
| Examples | Text formatting controls (bold, italic, underline), alignment options, view modes, or filter selections. |
Best Practices
- Clear Visual States: Ensure active and inactive states are clearly distinguishable through color, iconography, or typography changes.
- Consistent Sizing: Maintain consistent button sizes within a group for visual harmony and predictable interaction areas.
- Logical Grouping: Group related functionality together and use appropriate spacing between different toggle groups.
- Accessible Labels: Provide descriptive labels or aria-labels for screen readers, especially when using icon-only toggles.
- Keyboard Navigation: Support full keyboard navigation with arrow keys and space/enter for activation.
Do’s and Don’ts
Do
- Use toggle groups for related options that can be selected together.
- Provide clear visual feedback for active states.
- Support both single and multiple selection modes appropriately. * Use consistent sizing and spacing within groups.
Don't
- Mix unrelated functionality in the same toggle group.
- Make active states too subtle or unclear.
- Use toggle groups for actions that should be immediate buttons.
- Overcrowd groups with too many options.
Additional Guidance
- Accessibility: Toggle groups must support keyboard navigation, screen reader announcements, and proper ARIA attributes for selection states.
-
Psychological Impact:
- Decision Making: Toggle groups help users make clear choices by presenting options in a structured, comparable format.
- Visual Grouping: The grouped presentation helps users understand that options are related and can be compared.
- Feedback Clarity: Clear active/inactive states provide immediate feedback, building user confidence in their selections.