Tabs

A tab list with a sliding selection that switches between related panels in the same place.

When to use

• Two to six peer views of one object (overview, funnels, plan, webhooks).
• Content where people compare sections but only need one at a time.
• Not for sequential steps: use Stepper. Not for a compact two- or three-way value choice in a form: use SegmentedControl.

Usage

import { Tabs } from "@/components/iris/tabs/tabs";

h(
  Tabs,
  { defaultValue: "overview" },
  h(
    TabsList,
    { "aria-label": "Website settings" },
    h(TabsTrigger, { value: "overview" }, "Overview"),
    h(TabsTrigger, { value: "funnels" }, "Funnels"),
  ),
  h(TabsContent, { value: "overview" }, "18,240 visitors a week."),
  h(TabsContent, { value: "funnels" }, "Visitors 12,847, signups 4,521."),
);

Props

Tabs (Radix Tabs Root)

Prop	Type	Default	Description
value	string	—	Controlled active tab.
defaultValue	string	—	Initial tab when uncontrolled.
onValueChange	(value: string) => void	—	Called when a tab is chosen.
orientation, activationMode, dir	Radix		Passed through.

TabsList — Radix List; give it an aria-label. TabsTrigger — value (required) and label children. TabsContent — value (required), forceMount to keep every panel mounted (disables the panel transition).

Notes

• Radix keyboard model: arrow keys move between tabs, Home/End jump, and the panels are linked with aria-controls.
• When the tab list overflows, scroll buttons appear at the edges and the active tab is scrolled into view.
• The selection pill glides between triggers; incoming panels slide 8px in the direction of travel and the height morphs between panels. Reduced motion uses a short crossfade.
• Reads --surface, --hover, --line, --ink, --ink-2, --ink-3, --radius-button (the track, triggers and indicator) and --radius-control (the panel focus ring).