Component · 06

Tabs

Built on Base UI for roving focus, arrow-key navigation and the right ARIA roles. The selected tab is inked in, like a pressed block.

Default

Tab into the list, use the arrow keys to move, and Enter or Space to select.

Workspace stats and a summary of recent work.

tsx

<Tabs defaultValue="overview">
  <TabsList aria-label="Project sections">
    <TabsTab value="overview">Overview</TabsTab>
    <TabsTab value="activity">Activity</TabsTab>
    <TabsTab value="settings">Settings</TabsTab>
  </TabsList>
  <TabsPanel value="overview">…</TabsPanel>
  …
</Tabs>

Vertical and disabled

Profile, email and password.

tsx

<Tabs defaultValue="a" orientation="vertical">
  <TabsList aria-label="Sections">
    <TabsTab value="a">Account</TabsTab>
    <TabsTab value="b">Billing</TabsTab>
    <TabsTab value="c" disabled>Audit log</TabsTab>
  </TabsList>
  …
</Tabs>

Props

Prop	Type	Default	Description
Tabs defaultValue / value	string	-	Which tab is selected. Controlled with value + onValueChange.
Tabs orientation	"horizontal" \| "vertical"	"horizontal"	Layout and which arrow keys move focus.
TabsList activateOnFocus	boolean	false	Select as soon as an arrow key moves focus, instead of waiting for Enter or Space.
TabsTab value	string	required	Pairs the tab with the panel of the same value.
TabsTab disabled	boolean	false	Stays focusable so screen reader users find it, but cannot be selected.
TabsPanel keepMounted	boolean	false	Keep the hidden panel in the DOM.