Tabs
navigationTab navigation with an animated underline indicator, full keyboard navigation, and an optional vertical layout.
import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/forge'Preview
Tabs
Compose pages from accessible primitives.
Code Example
Props
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
defaultValue | string | - | No | Initially active tab value |
value | string | - | No | Controlled active tab value |
onValueChange | (value: string) => void | - | No | Callback when active tab changes |
orientation | 'horizontal' | 'vertical' | 'horizontal' | No | Layout direction |
Variants
horizontalvertical
Accessibility
- Uses Radix Tabs - full keyboard navigation (Arrow keys, Home, End)
- Active tab has aria-selected="true"
- Tab panels use role="tabpanel"