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.

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".