Tabs

<Tabs
  aria-label="Project"
  defaultValue="summary"
  items={[
    { value: 'summary', label: 'Summary', content: <Summary /> },
    { value: 'activity', label: 'Activity', content: <Activity /> },
  ]}
/>

Each TabsItem has its value, the panel's content, and its label with an optional icon, or a button of your own, which becomes the tab.

• disabled dims a tab and reports aria-disabled.
• A button is a Button, an IconButton or a component that forwards native button props and its ref, never a link. Every tab is a text tab, whatever its button's variant.
• aria-label names the tab list.
• Leave the tabs uncontrolled, starting on defaultValue, the first enabled tab by default, or control them with value and onValueChange.

Activation and mounting

<Tabs aria-label="Reports" activation="manual" keepMounted items={reports} />

activation is automatic, the default, which selects a tab as the arrow keys reach it, or manual, where Enter or Space selects, for panels that load when chosen, such as a report from a server. Only the selected panel is mounted; keepMounted keeps the others mounted and hidden, so their state survives switching.

Size, orientation and fill

size is sm, md or lg, the default, whose tabs are as tall as medium buttons.

• orientation is horizontal, the default, or vertical, a column moved through with ↑ and ↓, whose tabs are as tall as medium controls unless size is sm. The panels stay below the list either way: to put a vertical list beside them, lay the Tabs out as a row through style, as the VerticalList example does.
• With fill, the selected panel takes the height left below the list. Give the Tabs a height, for example as a flex child.
• A horizontal list lines its first label up with the content's edge, so the first tab's padding, where its focus ring shows, reaches into the space before it. Leave that room where the Tabs sit flush against an edge that clips.

A layout of your own

renderList places the tab list in a layout of your own, such as beside a heading: it receives the list and returns what to render in its place, with the list in it once; the panels stay below. listClassName and panelClassName add classes to the list and to every panel.

<Tabs
  aria-label="Orders"
  items={items}
  renderList={(list) => (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <Text render={<h3 />} variant="title">
        Orders
      </Text>
      {list}
    </div>
  )}
/>

The tabs, env-tabs, carry data-fill when they fill a region; the rail, env-tabs-list, data-orientation="vertical" in a column; each tab, env-tabs-tab, data-active while selected. The panels sit in env-tabs-panels, each an env-tabs-panel.

The rail has no fill unless its container color sets one.