💠 Segmented
Used to organize content by grouping similar information on the same area.
Usage
The Segmented Control component allows users to choose between two or more mutually exclusive options. It is displayed as a horizontal set of segments, each representing an option, with the current selection highlighted.
This component is often used to switch between different views, filters, or modes within the same context.
When to use
- Mode switching: Use Segmented Controls for changing modes within a particular context, such as switching between list and grid views in a gallery.
- Filtering content: Employ Segmented Controls to filter content on a page, such as sorting items by price or date.
Avoid using Segmented Controls when the options represent a workflow or a process with sequential steps; in such cases, a stepper or progress indicator might be more appropriate.
Examples
Default
Default value
Disabled
With icon
Useful links
Here you go! Here are all the resources you might need if you are a designer, a developer or a content manager:
Accessibility
Adheres to the Tabs WAI-ARIA design pattern (opens in a new tab).
Keyboard interactions
| Key | Description |
|---|---|
Tab | When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content. |
ArrowRight | Moves focus to the next trigger and activates its associated content. |
ArrowLeft | Moves focus to the previous trigger and activates its associated content. |
Home | Moves focus to the first trigger and activates its associated content. |
End | Moves focus to the last trigger and activates its associated content. |