Segmented Control
A segmented control is a set of adjacent, mutually exclusive buttons or tabs that toggle between different views, filter criteria, or states. Each segment represents a discrete option, and selecting one segment automatically deselects the previously active one. Segmented controls are often used in toolbars or filters, where space is limited and quick, direct switching between options is required.
Usage
Mutually Exclusive Choices: Use segmented controls when only one option should be active at a time.
Immediate Feedback: Selecting a segment often triggers an immediate change in the view or data displayed, without needing to click a separate “Apply” button.
Space Efficiency: Placing these controls side-by-side is more compact than using a dropdown or multiple tabs, making it suitable for smaller UI areas (e.g., top bar of a mobile app).
Use cases
Toggling between “List View” and “Grid View”
Switching between different timeframes (e.g., “Day,” “Week,” “Month,” “Year”)
Applying quick filters or categories in a data set (e.g., “All,” “Open,” “Closed”)
Not to be confused with
Tabs: Tabs are generally larger, often placed in a dedicated tab bar, and can hold more complex labels or icons. Segmented controls are more compact and frequently used for quick toggling rather than navigating major content sections.
Radio Buttons: Both represent mutually exclusive options. However, radio buttons are typically listed vertically or in a form-like layout. Segmented controls are more visual, streamlined, and often used inline for immediate changes.
Dropdown: Dropdowns can hold multiple options but require an extra click to open and often accommodate larger sets of options. A segmented control is optimal for a small set of frequently used or primary options.
Switch: Switches toggle a single state (on/off). Segmented controls handle multiple states (one of many).
Best practices
Limit the Number of Segments
Ideally, keep it to 2–4 segments. More segments can become visually crowded and harder to select, especially on smaller screens.
Label Clearly
Use short, descriptive text or universally recognized icons.
If you must include both text and icons, ensure each segment remains easily tappable/clickable.
Highlight the Active Segment
Visually emphasize the selected segment (e.g., distinct background color, border, or bold text).
Provide clear hover/focus states for accessibility.
Ensure Accessibility
Make segments keyboard-focusable.
If using icons, provide accessible text labels or aria-label attributes.
Set the appropriate ARIA roles (e.g., role="group" or role="radiogroup" with each button as role="radio").
Responsive Design
On smaller devices, segments might need to scale or wrap to the next line.
Test to ensure tap targets remain large enough to prevent accidental selections.
Immediate or On-Change Feedback
Typically, the interface updates as soon as a segment is clicked/tapped.
Ensure the transition or content update is quick and clear to avoid user confusion.
Keep Consistency
Align the appearance of segmented controls with your design system’s styles (color, typography, rounded corners, etc.) so they blend seamlessly into the UI.
Keep each segment label concise (1-2 words) to avoid overcrowding the control.
Summary
Segmented controls provide a streamlined way for users to switch between small sets of related, mutually exclusive options. By keeping labels concise, visually emphasizing the active choice, and ensuring proper accessibility and responsiveness, segmented controls can greatly enhance usability in scenarios where quick toggling or filtering is essential.
