Tabs

Usage#

import { Tabs, TabsContent, TabsList, TabsTrigger } from "neelam-ui";
 
<Tabs defaultValue="account">
  <TabsList>
    <TabsTrigger value="account">Account</TabsTrigger>
    <TabsTrigger value="password">Password</TabsTrigger>
  </TabsList>
  <TabsContent value="account">Update your display name.</TabsContent>
  <TabsContent value="password">Change your password.</TabsContent>
</Tabs>

Each TabsContent is matched to its TabsTrigger by value.

Orientation#

orientation="vertical" stacks the strip beside the panels. The arrow keys follow: Up/Down replace Left/Right, and aria-orientation is set to match, so assistive tech announces the right ones.

Automatic activation#

Arrow keys move focus and selection together — "automatic activation" in the pattern's terms. Arrowing along the strip switches panels as you go, the way a browser's own tab strip behaves.

That differs from the roving focus in Select or DropdownMenu, where arrows only move focus and a separate Enter confirms. The distinction is deliberate: a menu item might be destructive or hard to undo, so it should not fire just because you moved through it. Switching a tab is cheap and reversible.

Inactive panels are unmounted#

Only the active TabsContent is rendered at all. Unlike Accordion, which keeps closed content mounted so it can animate, switching tabs is not animated, so there is nothing to gain from keeping inactive panels around.

The trade-off is real and worth stating plainly: a panel's internal state — a scroll position, an uncontrolled input's value — is lost when you switch away and will not be there when you switch back. Lift anything that must survive into your own state.

Controlled#

const [tab, setTab] = useState("account");
 
<Tabs value={tab} onValueChange={setTab}>…</Tabs>

Keyboard#

Accessibility#

Implements the APG tabs pattern:

• The strip is role="tablist" with aria-orientation; each tab is a native <button> recategorized as role="tab" with aria-selected and aria-controls pointing at its panel.
• Roving tabindex: only the active tab is in the page's tab order (tabIndex={0}), the rest are -1. Tab therefore steps past the strip rather than through every tab in it.
• Each panel is role="tabpanel" with tabIndex={0}, so a keyboard user can move from the tab straight into the panel even when its content has nothing focusable in it.
• Disabled tabs are skipped by the arrow keys rather than trapping focus.

API reference#

Tabs#

TabsList#

TabsTrigger#

TabsContent#