Tabs
Tab navigation for switching between related panels, built on Radix.
Tabs organises content into panels you switch between. Built on Radix: arrow keys move
between tabs, and the active tab shows a coloured underline. Compose TabsList +
TabsTrigger (one per tab) and a matching TabsContent per panel.
Overview content.
Installation
pnpm add @infinitibit_gmbh/ui @infinitibit_gmbh/theme-defaultUsage
import '@infinitibit_gmbh/theme-default/theme.css';
import '@infinitibit_gmbh/ui/styles.css';
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@infinitibit_gmbh/ui';
export function Example() {
return (
<Tabs defaultValue="overview">
<TabsList aria-label="Sections">
<TabsTrigger value="overview">Overview</TabsTrigger>
<TabsTrigger value="activity">Activity</TabsTrigger>
</TabsList>
<TabsContent value="overview">…</TabsContent>
<TabsContent value="activity">…</TabsContent>
</Tabs>
);
}Sizes
TabsTrigger takes size — sm, md (default), or lg.
API
Tabs
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | Controlled active tab |
defaultValue | string | — | Initial active tab (uncontrolled) |
onValueChange | (value: string) => void | — | Called when the active tab changes |
TabsTrigger
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | — | The tab's value (required) |
size | 'sm' | 'md' | 'lg' | 'md' | Tab size |
disabled | boolean | — | Skips the tab in keyboard nav |
TabsList and TabsContent forward all native Radix props.
Accessibility
TabsListisrole="tablist"; triggers arerole="tab"witharia-selected; panels arerole="tabpanel".- Arrow keys move between tabs; disabled tabs are skipped. The focus ring uses
:focus-visible.