Tabs
Tab navigation built on Radix UI Tabs primitives. Supports both controlled and uncontrolled usage with keyboard navigation.
Basic Tabs
Preview
System overview panel.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| defaultValue | string | - | The value of the tab to select by default. |
| value | string | - | Controlled active tab value. |
| onValueChange | (value: string) => void | - | Callback invoked when the active tab changes. |
| className | string | - | Additional CSS classes. |
Accessibility
- Built on Radix UI Tabs which provides full WAI-ARIA tabs pattern support
<TabsList>renders withrole="tablist"and each<TabsTrigger>withrole="tab"<TabsContent>renders withrole="tabpanel"and is linked to its trigger viaaria-labelledby- Arrow keys navigate between tabs,
HomeandEndjump to first and last tab - Active tab trigger has
aria-selected="true"and inactive triggers havearia-selected="false"