Tabs

import { Tabs } from "@knitui/components";

Usage

Tabs is a compound component: a Tabs.List of Tabs.Tabs, and a Tabs.Panel for each one. The value on a tab and its panel are what pair them — there is no index to keep in sync.

import { Tabs } from "@knitui/components";

<Tabs defaultValue="general">
  <Tabs.List>
    <Tabs.Tab value="general">General</Tabs.Tab>
    <Tabs.Tab value="billing">Billing</Tabs.Tab>
  </Tabs.List>

  <Tabs.Panel value="general">Account settings</Tabs.Panel>
  <Tabs.Panel value="billing">Cards and invoices</Tabs.Panel>
</Tabs>;

Leave value off for uncontrolled tabs, or pass value + onChange to drive it yourself. orientation="vertical" moves the list to the side (placement picks which side), and inverted puts it after the panels.

By default inactive panels stay mounted and hidden (keepMounted), so state inside a panel survives switching away from it. Set keepMounted={false} when a panel is expensive — a map, a chart, a video — and should not exist until it's selected.

When to use something else

• Panels that expand in place rather than replacing each other → Accordion
• A small set of mutually exclusive values, not views → SegmentedControl
• Navigating between routes → NavLink

Examples

Props

Style slots

Every part of Tabs can be styled through the styles prop. Explicit props on the component always win over slot styles.

Plus 495 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.

Accessibility

On the web Tabs implements the ARIA tabs pattern: the list is a tablist, each tab a tab owning its panel via aria-controls, and each panel a tabpanel labelled by its tab. Ids are generated for you, or derived from the id prop.

Focus is managed with a roving tabindex — only the active tab is in the tab order, so Tab moves past the whole list rather than through every tab in it, and the arrow keys move within it.

Two behaviours are worth choosing deliberately:

• activateTabWithKeyboard (default true) selects a tab as soon as an arrow key focuses it — automatic activation, which ARIA recommends when switching is instant. Set it to false for manual activation (focus moves, selection waits for Enter or Space) when a panel is expensive to render, so arrowing across the list doesn't mount four panels on the way past.
• loop (default true) wraps focus at the ends of the list. Turn it off when the list is long enough that wrapping is disorienting.

Disabled tabs are skipped by arrow navigation and are never focused.