Tabs
Tabs
A Radix Tabs — switch between panels, one visible at a time.
import { Tabs, TabsList, TabsTrigger, TabsContent } from "@pompeitech/vesuvius-ui";Default
Account
Make changes to your account here.
API
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
value / defaultValue | string | Controlled/uncontrolled active tab. | |
onValueChange | (value: string) => void | ||
orientation | "horizontal" | "vertical" | "horizontal" | Also changes arrow-key navigation direction. |
activationMode | "automatic" | "manual" | "automatic" | "automatic": arrow keys switch the active tab immediately. "manual": arrow keys move focus only, activation needs an explicit Enter/Space — use this when switching tabs is expensive (a network fetch per tab). |
TabsList — every native <div> prop; role="tablist" container for the triggers.
TabsTrigger
| Prop | Type | Description |
|---|---|---|
value | string | Required — matches a TabsContent's value. |
disabled | boolean |
TabsContent
| Prop | Type | Description |
|---|---|---|
value | string | Required — matches the TabsTrigger that reveals it. |
forceMount | boolean | Keeps inactive panels mounted (hidden) instead of unmounting them — needed if a panel holds state that shouldn't reset when hidden. |
Accessibility
Implements the ARIA tablist/tab/tabpanel pattern automatically — ←/→ (or ↑/↓ when orientation="vertical") move between triggers, aria-selected/aria-controls/aria-labelledby are wired for you.