Tabs

A tab set: a bar of triggers and the panel each one reveals.

Four parts, one selection. Tabs holds the state and the tokens; TabsList is the bar, TabsTrigger a button in it, and TabsContent the panel that matches. Triggers and panels are paired by their value — the ARIA roles, the ids that tie the two together, and arrow-key navigation all follow from that.

Account settings go here.

Usage

tabs-demo.tsx

import { Tabs, TabsList, TabsTrigger, TabsContent } from 'trivela-ui';

export function Example() {
  return (
    <Tabs defaultValue="account">
      <TabsList aria-label="Settings">
        <TabsTrigger value="account">Account</TabsTrigger>
        <TabsTrigger value="password">Password</TabsTrigger>
      </TabsList>
      <TabsContent value="account">Account settings go here.</TabsContent>
      <TabsContent value="password">Change your password.</TabsContent>
    </Tabs>
  );
}

Examples

A tab set

defaultValue picks the tab that opens first. Only the matching panel renders, so the others cost nothing.

Account settings go here.

Keyboard navigation

The set is one tab stop. Arrow keys move between triggers and select as they go, Home and End jump to the ends, and disabled triggers are skipped rather than focused.

Focus a trigger, then press → or ←.

Controlled

Pass value and onValueChange to drive the selection from outside — to sync it with a route, or to change tabs from elsewhere on the page. The preview below is the uncontrolled twin, since these docs pages render on the server.

Account settings go here.

Variant and color

The root's tokens reach both parts: variant styles the bar, color fills the selected trigger. TabsList can override either when the bar should differ from the chip.

API Reference

Prop	Type	Default	Description
value / defaultValue	string	—	Tabs — the selected trigger's value. Pass value for a controlled set, defaultValue to seed the component's own state.
onValueChange	(value: string) => void	—	Tabs — fires with the newly selected value.
value	string	required	TabsTrigger and TabsContent — the key that pairs a trigger with its panel.
disabled	boolean	false	TabsTrigger — dims it, and takes it out of arrow-key navigation.
variant	'solid' \| 'ghost' \| 'outline' \| 'subtle'	'outline'	Style variant for the bar. Set on Tabs for the whole set, or on TabsList to override it.
color	'primary' \| 'secondary' \| 'success' \| 'warning' \| 'danger' \| 'info' \| 'neutral'	'neutral'	Color scale for the bar and the selected trigger. TabsTrigger takes its own color to override one chip.
className	string	—	Merged with the generated classes via cn().
...props	HTMLAttributes<HTMLDivElement>	—	All native attributes are forwarded to the root element.