Tabs
Organising content · researchedTabs switch between related views of content at the same level without leaving the page.
molecule
Each block is the real component from that system’s own package, in an isolated frame. They are live: hover, focus and press them. Frames are drawn on white so systems compare on one ground, and a font a system licenses only for its own site (GOV.UK’s Transport) falls back to what the system itself specifies.
Ant Design
Tabs native: no antd 6.6.5- Variants
- line, card, editable-card
- Sizes
- large, medium, small
- States documented
- default, disabled
- Accessibility guidance
- no
Placements top, bottom, start, end. Type names from the type prop per docs summary; Radio.Button is mentioned as an alternative.
3 corrected on re-read
- builds_on_native: "unread" → "no" rc-tabs renders div role=tab with aria-selected
- states_documented: ["default"] → ["default","disabled"] TabItemType disabled prop
- a11y_documented: "unread" → "no" Page read in full; no accessibility section or aria guidance
Carbon
Tabs native: partly @carbon/react 1.117.0- Variants
- Line tabs, Contained tabs, Vertical tabs
- Sizes
- Small, Medium, Large, Extra Large
- States documented
- hover, focus, disabled
- Accessibility guidance
- yes
Source renders button role=tab inside div role=tablist with div role=tabpanel. Sizes vary by variant. Also documents selected/unselected states.
GOV.UK
Tabs native: no govuk-frontend 6.5.1Material Web
Tabs native: no @material/web 2.5.0Primer
UnderlinePanels variant native: partly @primer/react 38.40.1- Variants
- —
- Sizes
- —
- States documented
- —
- Accessibility guidance
- yes
Tab/tabpanel pattern for in-page panels; React version marked experimental on the docs page, Rails ready. UnderlineNav is a separate link-based navigation component, not tabs. Native usage not verified in source.
3 corrected on re-read
- builds_on_native: "unread" → "partly" Tab is <button type=button> with role=tab; list <ul role=tablist>; panel <div role=tabpanel>
- a11y_documented: "unread" → "yes" Read /accessibility/: expectations, Keyboard navigation, Built-in accessibility features
- urls: {"docs_url":"https://primer.style/product/components/underline-panels/","code_url":"https://github.com/primer/react/tree/main/packages/react/src/experimental"} → {"docs_url":"https://primer.style/product/components/underline-panels/","code_url":"https://github.com/primer/react/tree/main/packages/react/src/experimental/UnderlinePanels"} docs HTTP 200; prior code_url (.../src/experimental) resolved but is the parent folder, narrowed to UnderlinePanels (200)
Spectrum
Tabs native: no @spectrum-web-components/button 1.12.4USWDS
Not in the components index at designsystem.digital.gov/components/overview/ nor in the packages directory of github.com/uswds/uswds (develop). Side navigation and In-page navigation exist but are not tabs.
Platform facts
Anatomy
- tablist — APG term 'Tab List': a set of tab elements contained in a tablist element; role tablist.
- tab — APG: an element in the tab list that serves as a label for one of the tab panels and can be activated to display that panel.
- tabpanel — APG: the element that contains the content associated with a tab.
Keys the APG binds
- TabWhen focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is the tabpanel unless the first element containing meaningful content inside the tabpanel is focusable.
- Horizontal tab list. Left Arrowmoves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab.
- Horizontal tab list. Right ArrowMoves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab.
- Space or EnterActivates the tab if it was not activated automatically on focus.
- Home (Optional)Moves focus to the first tab. Optionally, activates the newly focused tab.
- End (Optional)Moves focus to the last tab. Optionally, activates the newly focused tab.
- Shift + F10If the tab has an associated popup menu, opens the menu.
- Delete (Optional)If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow.
- Vertical tab list (aria-orientation vertical)Down Arrow performs as Right Arrow is described above. Up Arrow performs as Left Arrow is described above.
- If the tab list is horizontal, it does not listen for Down Arrow or Up Arrow so those keys can provide their normal browser scrolling functions even when focus is inside the tab list.
- When the tabpanel does not contain any focusable elements or the first element with content is not focusable, the tabpanel should set tabindex="0" to include it in the tab sequence of the page.
The seven states
| default | One tab selected (aria-selected true), others false. |
|---|---|
| hover | Pointer-only CSS state. |
| focus | Tab key places focus on the active tab; arrows move focus among tabs. |
| active | Selected tab is the persistent state; also momentary press. |
| disabled | Individual tabs can be disabled; APG page does not detail it. |
| error | n/a — Navigation control with no value to validate. |
| loading | n/a — Not defined by APG; panel content may load, author concern. |
Every cell was read twice, the second time from raw sources by a separate pass. 6 of 35 fields changed on the second read — open any “corrected” note to see what it said before.