Anatomy
- Tabs: Holds the set of tab items.
- Tabs item: A single tab.
- Tab label: The text inside a tab.
- Active indicator: The underline under the selected tab.
Usage Guidelines
When to use this component
- Each option is a different section of content
- The sections stand on their own. Combining them into one view would be overwhelming or unhelpful.
-
One option is always selected.
When not to use this component
- For switching between views of the same data e.g, Calendar / Schedule, use Segmented Control. Tabs change the content; Segmented Control modifies the current the view.
- For filtering a list by mutually exclusive options (e.g, All / Upcoming / Past), use Segmented Control.
- For picking a value in a form use a Radio Group.
- For top-level app navigation, use Tab Bar.
- For going deeper into sub-screens (for example, Patients → Patient details), use a List instead. Tabs don't go deeper.
- When all the content fits on one screen, use a single scrollable view.
Best Practices
Keep the set of tabs stable once the screen has loaded.
Use short nouns. A tab label names a place, not an action.
Don't use long labels or verbs. Tabs are destinations, not actions.
Order tabs from most to least used, or in an order the user already expects (chronological, alphabetical).
Don't change the order between sessions.
Keep the user's scroll position and input in a tab when they switch away and back.
Don't reset a tab every time the user leaves it.
Put content that applies to every tab above the tab bar.
Don't put content below the tab bar that doesn't belong to the selected tab.
General Component Behaviors
Selection
Tapping a tab switches the content below instantly. No save button, no confirmation. One tab is always selected.
Initial selection
The first tab should be selected when the screen loads. Only remember the user's last choice if they keep coming back to the same tab.
Overflow
In the Scroll layout, when the combined width of the tabs exceeds the viewport, the tab bar becomes horizontally scrollable.
States
There exist three states for tab items on mobile:
- Default: Enabled, not selected
- Pressed: The user is touching the tab.
- Active: Selected tab, marked with the underline indicator.
Variants
Scroll
Each tab is as wide as its label. The bar scrolls sideways when the tabs don't fit. Use Scroll when labels vary in length, when the number of tabs can change, or when you're not sure which layout to pick.
Fixed
All tabs share the screen width equally. Use Fixed when you have two to four tabs with short labels that fit on the smallest device. Avoid it if labels might truncate or if more tabs could be added later.
Content Guidelines
- Keep labels to one or two words.
- Use nouns. A tab label names a place (Reviews, About, Photos).
- Use sentence case.
- Don't put numbers in labels.
For further information, see the Content Styleguide.
Known Gaps
- Badge / counter support on tab items
- Disabled state for tab items