Segmented Control
Jovin LiewWhat is a segmented control UI component?
Segmented Control is a toggle that either allows users to navigate between views, or, select options. It's primary use case is to organise content.
-
A segmented control that allows users to select between options are sometimes called Segmented Buttons.
-
A segmented control with navigational purposes are also known as Segmented Switch.
-
Each option in a segmented control is called a "segment", and it sits on a "track".
-
A segmented control can have two or more segments.
Examples of what a segmented control looks like.| When to use segmented control? | ||
|---|---|---|
| Few options | Best when users need to choose between a small number of mutually exclusive options (e.g., "list view" vs. "grid view"). | |
| Immediate switching | Ideal when changes happen instantly based on user selection, like switching tabs or filters. | |
| Equal importance | Use when all options are equally important and visible, with no hierarchy. | |
| When not to use segmented control? | ||
|---|---|---|
| Too many options | Avoid if there are many choices; use dropdowns or other selection controls instead. | |
| Non-binary options | Avoid using the segmented control to select between non-binary states. | |
| Hierarchical choices | If some options are more important than others, consider a different control for clarity. | |
What is the anatomy of a segmented control?
Anatomy of a toggle switchWhat are the design variants of a segmented control?
We studied over 2,600+ segmented control UI components on Mobbin, from real-world examples and found the following variants.
1. Segmented control can be styled with different corner radiuses
Depending on your team's design system, we've seen segmented control designs in circular or rectangular corner radiuses.
Examples of segmented controls with rectangular corner radius.
Examples of segmented controls with circular corner radius.2. Pill-shaped segmented control
If you want to more fancy, we've also seen segmented control options that are pill-shaped.
This means that one side of the segmented control has zero corner radius, and the other side has a rounded corner.
Examples of segmented control with pill shape3. Segmented control with stacked text labels
If you need to add more context to your segmented control, consider using stacked text labels. The tradeoff here is that you take up more vertical space, and the segmented control is less compact, but the added clarity might be worth it.
Examples of segmented control with stacked text labels4. Segmented control with icons only
To reduce cognitive load, you can opt for icon-only segmented control to accomodate more options for a tighter space. However, the icons must be clear and distinct - if not, you may risk confusing users.
This is approach is popular if you have multiple segments and you don't want to take up too much space.
Examples of toggle switches with track labelsWhen to use segmented controls?
1. Navigation
Segmented controls can be used as a primary navigation element to switch between different sections or views within an app.
For example, a news app might use a segmented control at the top of the screen to allow users to switch between categories like "Top Stories," "Sports," and "Entertainment.”
Examples of segmented control tabs in navigational context2. Settings & preferences
Segmented controls can be used in settings screens or preference panels to allow users to choose between different options or modes.
For instance, a photo editing app might use a segmented control to let users select a brush type, such as "Pencil," "Marker," or "Eraser.”
Examples of segmented control options in settings & preferences context3. Filter & sorting
In apps that display lists or grids of content, segmented controls can be used to allow users to filter or sort the content based on different criteria.
For example, an e-commerce app might use a segmented control to let users sort products by "Price," "Popularity," or "Newest Arrivals.”
Examples of segmented control options in filter & sorting context.Conflicting UI elements: Switches, Tabs
1. Segmented control v.s. Switch
A switch is a toggle shaped button used to toggle between two usually binary options, while a segmented control is a group of buttons used to select one option out of two or sometimes several.
To select an option, a segmented control can be activated by tapping anyone one of its inactive segments, while a switch is activated by tapping it's thumb.
Examples of switches.2. Segmented control v.s. Tab
While tabs and segmented control can serve the same purpose of selecting a view, the items in a segmented control are always connected by the track.
If the items are separated (not connected by a track), then it becomes a tab.
Examples of tabs.