Tabs

Tabs switches between panels that share one region. Selection lives in the tab set, focus lives on a trigger, and the two move together unless activation says otherwise.

InstallationCopy Anchor Link

nub add @gpuixui/components@workspace:*

UsageCopy Anchor Link

import {
  Tabs,
  TabsContent,
  TabsList,
  TabsTrigger,
} from "@gpuixui/components/tabs";

<Tabs defaultValue="profile">
  <TabsList label="Account settings">
    <TabsTrigger value="profile">Profile</TabsTrigger>
    <TabsTrigger value="notifications">Notifications</TabsTrigger>
  </TabsList>
  <TabsContent value="profile">…</TabsContent>
  <TabsContent value="notifications">…</TabsContent>
</Tabs>;

CompositionCopy Anchor Link

TabsContent mounts only its matching panel. A value with no matching trigger or panel is allowed: the set simply has nothing selected until a trigger is chosen.

OrientationCopy Anchor Link

orientation defaults to "horizontal". A vertical set puts the rail in a column beside the panels and maps movement to Down/Up.

<Tabs defaultValue="general" orientation="vertical">
  <TabsList label="Workspace sections">
    <TabsTrigger value="general">General</TabsTrigger>
    <TabsTrigger value="members" disabled>
      Members
    </TabsTrigger>
    <TabsTrigger value="billing">Billing</TabsTrigger>
  </TabsList>
  <TabsContent value="general">…</TabsContent>
  <TabsContent value="billing">…</TabsContent>
</Tabs>;

Disabled tabs are skipped by every key and cannot be clicked.

ActivationCopy Anchor Link

activation decides whether moving focus also selects:

• "automatic" (default) — arrow keys move focus and the selection.
• "manual" — arrow keys move focus only; Enter or Space selects.

Manual activation is the right choice when switching panels has a cost, such as a network read.

Controlled and uncontrolledCopy Anchor Link

<Tabs defaultValue="profile">…</Tabs>;               // remembers
<Tabs value={tab} onValueChange={setTab}>…</Tabs>;   // app remembers

A controlled set reports a click or key but does not switch its panel until the consumer re-renders with the new value.

KeyboardCopy Anchor Link

Only the selected trigger is in the tab order; every other trigger is -1.

API referenceCopy Anchor Link

TabsCopy Anchor Link

TabsListCopy Anchor Link

TabsTriggerCopy Anchor Link

TabsTriggerState passed to a style function is { active, disabled, focused, highlighted, orientation }.

Accessibility and limitationsCopy Anchor Link

• role="tablist", role="tab", role="tabpanel" and aria-selected are exposed; the roving tab index is the single-stop pattern. Give the list a label so the set has a name.
• No aria-orientation, aria-controls or aria-labelledby in @gpuix/native@0.10.0. The panel is named by its value, and the trigger-to-panel relationship is positional.
• The list owns the keys because a key event on a focused trigger bubbles to the list — measured in the real renderer.
• Vertical tabs are a layout and keyboard choice, not an ARIA attribute; the attribute is unavailable in this runtime.

RelatedCopy Anchor Link

• Accordion — stacked sections with more than one open.
• List — the same collection arithmetic for selectable rows.
• Breadcrumb — orientation through a hierarchy rather than across peers.