Weekly activity
1,248
+12% from last week
Tabs
/ role="tablist" · role="tab" /
also called tabbed interface, tab list, tab bar
Tabs organize peer views into one shared region, with exactly one tab and panel active at a time. The selected label is visually persistent, often with an underline, and keyboard users move across the tab list with arrow keys. Use them for closely related views, not for a sequential workflow.
Anatomy — every part, named
- 1Tab list
role="tablist"“The whole row of view-switching labels” is the tab list.
- 2Active-tab indicator
aria-selected="true"“The line that moves under the selected label” is the active-tab indicator.
- 3Tab panel
role="tabpanel"“The shared content area that changes below the labels” is the tab panel.
Prompt — paste into your agent
Build accessible Tabs with a role="tablist", one role="tab" marked aria-selected="true", and a matching role="tabpanel" connected with aria-controls and aria-labelledby. Keep only the active tab at tabindex="0", move between tabs with Left and Right Arrow, and switch the shared panel without navigating away.
In code
The exact names this thing goes by in code — each row is one framework’s word for it. Use the row that matches your project (or paste it into your prompt).
| ARIA | role="tablist" | |
| ARIA | role="tab" | |
| ARIA | role="tabpanel" | |
| Radix | Tabs |