Tabs

Tabs vs Segment Group: they look alike and share no semantics. Tabs is tablist / tabpanel — it reveals a panel, and the panels are the point. Segment Group is built on Ark's radio group and emits role="radiogroup" — it selects a value, and is a form control.

The test: if the thing you are switching between is content on this page, use Tabs. If it is a value you would submit, use Segment Group.

Grade 5 — a writ. Six days overdue.

Usage

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@kanzo-tech/ui";

<Tabs defaultValue="overview">
  <TabsList>
    <TabsTrigger value="overview">Overview</TabsTrigger>
  </TabsList>
  <TabsContent value="overview">…</TabsContent>
</Tabs>

lazyMount and unmountOnExit both default to true, so an inactive panel costs nothing — it is never mounted, and it is torn down when you leave it. Pass false if a panel holds state that has to survive a switch.

Anatomy

<Tabs>
  <TabsList>          ← renders its own indicator
    <TabsTrigger />
  <TabsContent />

TabsList renders the sliding indicator itself; there is no TabsIndicator to place.

Variants

Default — a filled pill follows the active tab.

Underline — a rule under the active tab.

Vertical

Orientation lives on the root and reaches every part through data-orientation, so the list and the panels reflow together.

Chartered 1194, seat at Thornmarch.

Keyboard

Key	Does
`←` / `→`	Moves to the previous / next tab, wrapping at the ends — horizontal orientation only.
`↑` / `↓`	The same, and only under `orientation="vertical"`.
`Home` / `End`	Moves to the first / last tab.
`Enter` / `Space`	Selects the focused tab — which matters only under `activationMode="manual"`.

Activation is automatic by default, so an arrow key both moves and selects; only one trigger is tabbable, so Tab leaves the list for the panel.

API Reference

TabsList

Prop	Type	Default
`variant`	`"default" \| "underline"`	`"default"`

Tabs

Prop	Type	Default
`lazyMount`	`boolean`	`true`
`unmountOnExit`	`boolean`	`true`

Everything else — value, defaultValue, onValueChange, orientation, activationMode — is Ark's Tabs.Root. useTabs re-exports Ark's useTabsContext for reading the active tab from a descendant.

Tabs

On this page