> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/segmented-control.md).
# Segmented Control
Segmented controls are used to display multiple segments, each functioning as a button that allows users to select from a set of mutually exclusive options.
## Overview
Segmented controls are designed to help users easily switch between different sections or categories without leaving the current page.
{% embed url="" %}
## When to use
* Use segmented controls when you want users to toggle between different views or filters, such as list and grid view, without needing additional navigation.
* Ideal when you need users to select only one option from a small set, such as sorting categories (e.g., "Recent", "Popular").
* Use when space is limited, and you want to present options in a compact, horizontal format, like on mobile devices.
* For interfaces where users expect immediate feedback upon selection, segmented controls ensure quick updates to reflect the chosen option.
## When not to use
* Do not use segmented controls if there are too many options, as they work best with 2-5 choices. Use a dropdown or another component instead.
* Avoid segmented controls when users need to select more than one option at a time; use multi-select components in such cases.
* When options require additional descriptions or actions (e.g., forms), segmented controls might not provide enough space or clarity.
* While both tabs and segmented controls allow navigation between content, but tabs switch between different views, while segmented controls are for choosing options within the same context.
## Types
Type
Accent
Used to draw attention to high-priority segments in the interface.
Primary
The default style, typically aligned with the main theme of the interface.
Secondary
A subtler option for secondary or less emphasized actions.
## Anatomy
1. **Active Button:** The currently selected or highlighted segment that indicates the user's choice.
2. **Inactive Button:** Buttons that are not selected but available for interaction, maintaining a clear state.
3. **Divider:** A visual separator between buttons that makes the segments distinct from one another.
4. **Button Label:** The text that describes each segment or choice, helping users understand what each option represents.
5. **Container:** The enclosing element that holds all segments and ensures they are aligned within the interface.
## Styles
## Size
| Size | Text Label (px) | Corner (px) | Container Height (px) |
| ------- | --------------- | ----------- | --------------------- |
| Default | 14 | 10 | 38 |
## Accessibility
* **Keyboard Navigation:** Ensure that all segments can be navigated using the keyboard, with a visible focus indicator and proper tabbing order.
* **Consistent Interaction:** All segments should have a uniform look and feel, and selection should provide immediate visual feedback, such as highlighting the active button.
* **Sufficient Contrast:** Make sure there is enough contrast between the active and inactive segments, as well as between the text and the background, to accommodate users with low vision or color blindness.
* **Mobile-Friendly:** Segmented controls should be touch-friendly, ensuring buttons are large enough to be tapped easily on small screens.
## Example
* **View Switcher:** Switching between grid and list views in a product gallery.
* **Filter Content:** Segmented control to filter content by categories like "All", "Unread", "Archived".
* **Sort Options:** Allow users to toggle between different sorting methods like "Price", "Newest", "Ratings".
* **Content Format Options:** Providing users the ability to choose between different content types, such as "Articles", "Videos", "Podcasts".
* **Settings Page:** Use segmented controls to toggle between different setting sections like "General", "Security", "Notifications".
