Navigation
Tab
Tabs organize related content into separate sections, allowing users to switch between views within the same page without navigating away.
Examples
Overview content goes here.
AccessibilityWCAG 2.1 Level AA Compliant
Features7 checks
- ARIA tablist, tab, and tabpanel roles
- aria-selected attribute on active tab
- aria-controls linking tabs to panels
- Keyboard navigation with arrow keys
- Focus management with visible focus ring
- Disabled tabs marked with aria-disabled
- Color + underline/border indicator (not color alone)
When to use this component
✓Do's
- •Organizing content into parallel sections
- •When users need to switch between views
- •Reducing page length by hiding inactive content
- •Related content that shares the same context
✗Don'ts
- •For sequential steps, use Stepper instead.
- •For navigation between pages, use links.
- •For comparing content side by side, show both.
- •For very few sections (1–2), just show them.
Do's and Don'ts
✓ Do's, Use clear active indicators with short labels
Details content goes here.
The 2px underline + brand color clearly shows which tab is active. Short 1–2 word labels improve scannability.
✗ Don'ts, Use tabs for step-by-step flows
Step 1
Step 2
Step 3
Don't label tabs "Step 1, Step 2, Step 3", use the Stepper component for sequential processes.