VOL. III · CH. 3.11 · COMPONENT
Tabs
Switching between mutually exclusive views without leaving the page.
1 min read · 131 words
3.11.1Definition & Anatomy
Tabs let a user switch between multiple content panels within the same page region, with only one panel visible at a time.
3.11.2Common Mistakes
- Using tabs for content a user needs to see simultaneously, rather than choose between.
- Losing a tab's scroll or form state when switching away and back.
- Too many tabs to fit without wrapping or horizontal scrolling on smaller screens.
3.11.3Best Practices
- Preserve each tab's internal state when switching between them within a session.
- Keep tab labels short and limit count; convert to a dropdown/select pattern if the list grows too long for the available width.
ExampleAccount settings pages commonly use tabs (Profile / Security / Billing) since each represents a genuinely separate, non-overlapping concern the user selects rather than compares.