Tabs

Glass tablist for switching views — keyboard arrows, Home / End, and linked panels.

Preview

Live

Overview panel — status, channel, and next action.

<div class="ui-tabs">
  <div class="ui-tabs__list" role="tablist" aria-label="Views">
    <button type="button" class="ui-tabs__trigger" role="tab"
      id="tab-overview" data-value="overview"
      aria-selected="true" aria-controls="panel-overview">Overview</button>
    <button type="button" class="ui-tabs__trigger" role="tab"
      id="tab-resume" data-value="resume"
      aria-selected="false" aria-controls="panel-resume" tabindex="-1">Resume</button>
  </div>
  <div class="ui-tabs__content" role="tabpanel" id="panel-overview"
    aria-labelledby="tab-overview" tabindex="0">…</div>
  <div class="ui-tabs__content" role="tabpanel" id="panel-resume"
    aria-labelledby="tab-resume" tabindex="0" hidden>…</div>
</div>

Variants

Selected tab

aria-selected="true" (and .is-active in React).

Disabled tab

Native disabled — skipped by keyboard.

Accessibility

  • Use role="tablist", role="tab", and role="tabpanel" with matching aria-controls / aria-labelledby.
  • Only the selected tab is in the tab order (tabIndex={0}); others use -1.
  • Arrow keys move selection; Home / End jump to first / last enabled tab (React TabsList).
  • Give the tablist an accessible name via aria-label or labelledby.
  • Panels may stay mounted and use hidden when inactive.

API

HTML classes

Class Description
.ui-tabs Root layout grid.
.ui-tabs__list Glass pill tablist.
.ui-tabs__trigger Individual tab button.
.ui-tabs__content Tab panel content.
.is-active Selected trigger (mirrors aria-selected).

React props

From src/core/Tabs.tsx — compound Tabs / TabsList / TabsTrigger / TabsContent.

Prop Type Default Description
value / defaultValue string '' Controlled or uncontrolled selected tab value (Tabs).
onValueChange (value: string) => void — Fires when selection changes.
orientation 'horizontal' | 'vertical' 'horizontal' Sets aria-orientation and arrow keys.
TabsTrigger value string — Required value matching a panel.
TabsContent forceMount boolean true Keep inactive panels mounted but hidden.