Tabs

Tabbed navigation for switching between related content panels. Keyboard accessible with ARIA tablist pattern.

Overview content goes here.

Open Tabs Playground

Anatomy

1 2

Panel content

1 Tab list — horizontal row of tab buttons with active indicator
2 Tab panel — content area associated with the active tab

Options

States

Default

Hover

Selected

Disabled

Table of options

Property	Values	Default
orientation	`horizontal` / `vertical`	`horizontal`
selected	`true` / `false`	`false`
disabled	`true` / `false`	`false`

Overflow

Horizontal tab lists use native inline scrolling when labels exceed the available width. Tab triggers do not shrink, so labels stay readable and focused tabs can be brought into view by the browser. Vertical tab lists do not use horizontal scrolling.

Panel switching is state-driven through the selected tab and the controlled panel's hidden state; panel scroll position is not an alternate activation model.

Keyboard interactions

Key	Action
`Tab`	Moves focus into/out of the tab list
`←` / `→`	Moves between tabs (horizontal)
`↑` / `↓`	Moves between tabs (vertical)
`Enter` / `Space`	Activates the focused tab
`Home`	Moves to first tab
`End`	Moves to last tab

Accessibility

Uses role="tablist", role="tab", and role="tabpanel" ARIA pattern.
aria-selected indicates the active tab.
aria-controls links each tab to its panel.
Only the selected tab has tabindex="0"; others have tabindex="-1" for roving focus.
aria-orientation communicates layout direction to assistive technology.

Design checklist

✓

All brand/mode contextsWorks across light and dark modes.

✓

Keyboard interactionsFull ARIA tablist pattern.

✓

Design tokensComponent-scoped tokens (--uif-tabs-*).