Behavior comparison
Segmented control vs Tabs
Decisive difference
Segmented control selects one value without owning any panel; Tabs select which one of several content panels is shown.
Choice criteria, links and sources
- Segmented controlChoose Segmented control if the choice is a value, such as a sort order or a unit, that changes how the same content is shown.Open entry Segmented control
- TabsChoose Tabs if each option shows its own panel of content within one shared area.Open entry Tabs
See the nine dimensionsSee the sources
Change view or reveal content
Try it
Should the control switch views, choose a compact mode, or reveal content in the flow?
Segmented control
Shared trial context
A project workspace reveals related content in place while preserving the user's position on the page.
Segmented control
Mission
Segmented control
Choose Compact with pointer, then Dense with arrows, and verify only one value remains selected.
- Brief.pdf
- Budget.xlsx
- Notes.txt
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- A single display density is active. Its selected segment and the content spacing stay in sync.
- Edge case
- When labels no longer fit without clipping, the interface uses a more suitable single-value control such as Select.
Tabs
Mission
Tabs
Move focus from Overview to Files with arrow keys, then press Enter to display its panel.
Project summary and upcoming deadlines.
Step 1 of 3
Try
Try the component. Your live result appears just above. Move on at your own pace.
Behavior and edge case
- What to observe
- One selected tab names the visible panel, and the other panels are hidden from interaction.
- Edge case
- If a panel needs noticeable loading time, activation becomes manual so arrow navigation does not trigger repeated waits.
What this example shows
Segmented control selects one value; Tabs selects a content panel, while Accordion expands or collapses sections independently.
Which fits your need?
Segmented control
Switching between a few compact display modes
Tabs
Grouping a few peer views in one workspace
Difference and sources
Segmented control selects one value; Tabs selects a content panel, while Accordion expands or collapses sections independently.
Read the sourcesParts of the specimen
Select a numbered marker on the schematic, or use the list below, to see its role. The schematic shows the concept's representative state.
Group label
A shared name that explains the choice represented by the group.
Decision
Family question
Should the control switch views, choose a compact mode, or reveal content in the flow?
Three criteria to choose
- Interactivity
Segmented control
Exactly one segment is active and selecting another updates the view immediately.
Tabs
One tab and panel are active; activation may be automatic or manual depending on loading cost.
- Placement
Segmented control
A short single row of adjacent options within the affected view.
Tabs
A tab list directly adjacent to the panel controlled by the active tab.
- Focus
Segmented control
The group is one tab stop after selection, with a visible focus indicator distinct from selected state.
Tabs
The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content.
Nine dimensions
- Trigger
Segmented control
Click or tap one compact segment.
Tabs
Click, tap, or keyboard activation of a tab; arrow keys move within the tab list.
- Modality
Segmented control
Non-modal exclusive control for an immediate view or filter change.
Tabs
Non-modal navigation between related panels in the same context.
- Placement
Segmented control
A short single row of adjacent options within the affected view.
Tabs
A tab list directly adjacent to the panel controlled by the active tab.
- Interactivity
Segmented control
Exactly one segment is active and selecting another updates the view immediately.
Tabs
One tab and panel are active; activation may be automatic or manual depending on loading cost.
- Focus
Segmented control
The group is one tab stop after selection, with a visible focus indicator distinct from selected state.
Tabs
The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content.
- Dismissal
Segmented control
Not applicable: choosing another segment replaces the selected value.
Tabs
Not applicable: selecting another tab replaces the visible panel without closing the component.
- Accessible role
Segmented control
radiogroup > radio
Tabs
tablist > tab + tabpanel
- Use case
Segmented control
Switching between a few compact display modes
Tabs
Grouping a few peer views in one workspace
- Mobile behavior
Segmented control
Limit it to a few short options; use tabs or a select before labels overflow.
Tabs
Keep labels readable in a horizontally scrollable list; avoid wrapping tabs onto ambiguous rows.
| Dimension | Segmented controlSegmented control | TabsTabs |
|---|---|---|
| Trigger | Click or tap one compact segment. | Click, tap, or keyboard activation of a tab; arrow keys move within the tab list. |
| Modality | Non-modal exclusive control for an immediate view or filter change. | Non-modal navigation between related panels in the same context. |
| Placement | A short single row of adjacent options within the affected view. | A tab list directly adjacent to the panel controlled by the active tab. |
| Interactivity | Exactly one segment is active and selecting another updates the view immediately. | One tab and panel are active; activation may be automatic or manual depending on loading cost. |
| Focus | The group is one tab stop after selection, with a visible focus indicator distinct from selected state. | The tab list is one tab stop; the visible panel is reachable in normal document order when it contains focusable content. |
| Dismissal | Not applicable: choosing another segment replaces the selected value. | Not applicable: selecting another tab replaces the visible panel without closing the component. |
| Accessible role | radiogroup > radio | tablist > tab + tabpanel |
| Use case | Switching between a few compact display modes | Grouping a few peer views in one workspace |
| Mobile behavior | Limit it to a few short options; use tabs or a select before labels overflow. | Keep labels readable in a horizontally scrollable list; avoid wrapping tabs onto ambiguous rows. |