Tabs

Tab list, triggers, and panels with application-owned state. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• tab-group, tab-list, tab-list--vertical, tab, tab-content

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<div class="tab-group">
  <div class="tab-list" role="tablist" aria-label="Workspace sections">
    <button class="tab" id="overview-tab" role="tab" aria-selected="true"
            aria-controls="overview-panel" tabindex="0" type="button">Overview</button>
    <button class="tab" id="settings-tab" role="tab" aria-selected="false"
            aria-controls="settings-panel" tabindex="-1" type="button">Settings</button>
  </div>
  <div class="tab-content" id="overview-panel" role="tabpanel"
       aria-labelledby="overview-tab">Workspace activity</div>
  <div class="tab-content" id="settings-panel" role="tabpanel"
       aria-labelledby="settings-tab" hidden>Preferences</div>
</div>

Variants and composition

tab-list–vertical changes tab orientation. aria-selected, tabindex, and hidden panels must change together when selection changes.

Bound the tab group to its available width. The tab list scrolls internally when labels exceed that width; selection code must reveal the active tab without moving the whole page. Set aria-orientation="vertical" and the corresponding keyboard model when using the vertical layout.

Behavior and accessibility

Tabs need shared selected state, linked aria-controls/aria-labelledby IDs, roving focus, arrow/Home/End keys, and hidden inactive panels. The preset supplies only visual structure.

Reference

See the interactive Storybook specimen ↗. Continue to Timeline or return to the Official preset overview.