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. 1 Tab list — horizontal row of tab buttons with active indicator
  2. 2 Tab panel — content area associated with the active tab

Options

States

Default
Hover
Selected
Disabled

Table of options

PropertyValuesDefault
orientationhorizontal / verticalhorizontal
selectedtrue / falsefalse
disabledtrue / falsefalse

Keyboard interactions

KeyAction
TabMoves focus into/out of the tab list
← / →Moves between tabs (horizontal)
↑ / ↓Moves between tabs (vertical)
Enter / SpaceActivates the focused tab
HomeMoves to first tab
EndMoves 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 color themesWorks across light and dark modes.
✓
Keyboard interactionsFull ARIA tablist pattern.
✓
Design tokensComponent-scoped tokens (--tabs-*).