Tabs vs. Segmented Control
Tabs switch between sections of content. A segmented control changes a small mode, filter, or value in the same view.
Use tabs for separate content sections. Use a segmented control for a few short choices that change the same content.
See what each pattern does
Try each example. Then read about the job it is made to do.
Tabs
Tabs use labels to switch content in one shared panel. The main task stays open.
Overview, Activity, and Permissions change the panel below while the same project stays open.
- Use it when
- Use tabs for a few sections at the same level when their labels should stay visible.
- Do not use it when
- Never use tabs as small links to pages that have nothing to do with each other.
- Name used in code
role="tablist"
Toggle Group
A labeled group of on-or-off buttons. One or more separate options can stay pressed.
A text editor lets Bold and Italic stay on at the same time. Each button reports whether it is pressed.
- Use it when
- Use it for a few small, reversible modes whose current states must remain visible.
- Do not use it when
- Use radio buttons when exactly one choice can be submitted. Use checkboxes for normal form choices.
- Name used in code
button[aria-pressed] in a labeled group
Quick comparison
| UI pattern | Best for | Not for | Name used in code |
|---|---|---|---|
| Tabs | Use tabs for a few sections at the same level when their labels should stay visible. | Never use tabs as small links to pages that have nothing to do with each other. | role="tablist" |
| Toggle Group | Use it for a few small, reversible modes whose current states must remain visible. | Use radio buttons when exactly one choice can be submitted. Use checkboxes for normal form choices. | button[aria-pressed] in a labeled group |
Before you ship
- 01
Write down what the person needs to do.
- 02
Test the keyboard, focus, touch, zoom, loading, empty, and error states.
- 03
Make sure people can get the same information without hover or motion.
- 04
Test with real content on both small and large screens.
Comparison request you can copy
Copy this when your team needs help choosing between the patterns.
Choose the best pattern from Tabs, Toggle Group for our real user flow. Use this rule: Tabs switch between sections of content. A segmented control changes a small mode, filter, or value in the same view. Write down the task, amount of content, and cost of stopping the flow. Check keyboard, touch, loading, error, and reduced-motion behavior. Explain your choice, then build the smallest accessible version with the project's design system.