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.
If you called it…
…you meant a tabs.
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.
Debug prompt — when it misbehaves
Paste this, then describe what you’re seeing — it hands your agent the classic failure modes to rule out first.
Debug my tabs (role=tablist/tab/tabpanel, roving tabindex). Rule out: every tab in the Tab order instead of one roving tabindex with arrow-key movement; panels missing aria-labelledby back-references; the active indicator not moving on resize because its position was measured once; panel state lost on switch because inactive panels unmount when they should hide. The symptom:
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 |