Tabs

Tabs help to organise information, by grouping it into separate views.

What the component handles

Proper tab semantics with role="tablist" and role="tab"

aria-selected state management for active/inactive tabs

Keyboard navigation with Arrow keys between tabs and Tab key to content

What you need to provide

aria-controls prop linking each tab to its corresponding content panel ID

Tab panels with matching IDs, role="tabpanel", and aria-labelledby pointing back to the tab ID

Currently, tabs do not support icon-only content. Icons are set to be decorative and don’t support alternative text.

Color contrast

Meets the WCAG 2.1 AA color contrast ratio requirements and can be used on the following:

background.static.xxx tokens except for background.static.inverse and background.static.on-color

in all Card variants,

in Banner components.