Tabs
A full-featured tabbed interface that combines a tab bar with associated panel content.
When to use
- When you need both a tab navigation bar and associated content panels in a self-contained component.
- When tab content is rendered directly alongside the bar (not in a separate route).
- When you want the component to manage active state without external wiring.
When not to use
- Use diwa-tabs-bar when you need to manage the tab bar and panels separately (e.g. with routing).
- Use diwa-segmented-control for compact, inline mode switching without dedicated panels.
Dos and don'ts
Do
- ✓Use
labelon eachdiwa-tabs-itemfor clear tab labels. - ✓Keep related content grouped under a single tabs instance.
- ✓Pre-select the most relevant tab with
active-tab-index.
Don't
- ✕Don't nest tabs within tabs - this creates confusing navigation hierarchy.
- ✕Don't put unrelated content in tabs - each tab should belong to the same conceptual group.