Tabs
A selection pattern that connects a tab list to corresponding tab panels.
Anatomy
| Part | Required | Description |
|---|---|---|
tablist | yes | Container for tab controls. |
tab | yes | Selectable tab control. |
tabpanel | yes | Panel whose visibility follows the selected tab. |
States
- default
- hover
- focus-visible
- selected
- disabled
Keyboard
- Arrow keys move focus among tabs according to orientation
- In automatic activation, focus also selects and shows the panel
- In manual activation, focus moves without selecting until Space or Enter activates
- Home and End may jump to first and last tab when supported
Accessibility
Distinguish selection from activation: selection identifies the current tab and visible panel; activation is the gesture that commits selection when the pattern is manual. Expose tab, tablist, and tabpanel relationships with correct orientation. Do not confuse this pattern with a top-level application tab bar that only performs navigation.
Motion
Panel crossfades or indicator slides may run on selection; under reduced motion, switch panels without sliding content.
Platform mappings
web
ARIA tabs pattern or native design-system tabs with correct roles and keyboard mode.
apple
SwiftUI TabView only when it matches in-page selection; otherwise a segmented picker or custom tabs.
android
Compose TabRow / ScrollableTabRow with pager or panel binding.