Tabs

A tab list where each tab shows one panel.

Import
import { Tabs } from '@texuli/primitives/tabs';
Pattern
Tabs (WAI-ARIA APG)
Size budget
4.5 KiB gzip for @texuli/primitives/tabs
Reference
packages/primitives/docs/prim-tabs.md

Live demo

Loading the Tabs demo…

Anatomy

Tabs anatomy: each box holds the parts inside it.
  • Tabs.Root
    • Tabs.List
      • Tabs.Trigger
    • Tabs.Content

Behavior checks

tests/behavior/scenarios/tabs.spec.ts runs 7 rows against the Tabs scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 7 rows
  1. a named tablist with tabs, the first selected and its panel shown
  2. arrow keys move between tabs and show their panels, skipping the disabled one
  3. Home and End go to the first and last tab
  4. starting on a later tab, Tab lands on that selected tab, not the first
  5. after the selection changes, Tab into the list lands on the newly selected tab
  6. Tab leaves the tablist for the active panel
  7. a click selects a tab

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.5 KiB gzip for @texuli/primitives/tabs (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).