← Design system
Tabs
Interactive examples and usage for the Tabs component.
Examples
Component preview goes here.
Pills Variant
Active: a
Props
| Prop | Type | Default | Description |
|---|---|---|---|
tabs | TabDef[] | required | Array of tab definitions with value and label |
value | string | undefined | Controlled active tab value |
defaultValue | string | undefined | Initial active tab (uncontrolled) |
onValueChange | (value: string) => void | undefined | Callback when active tab changes |
variant | 'line' | 'pills' | 'enclosed' | 'line' | Tab style variant |
Keyboard
| Key | Action |
|---|---|
| Arrow Left | Move to previous tab |
| Arrow Right | Move to next tab |
| Home | Move to first tab |
| End | Move to last tab |
| Enter / Space | Activate focused tab |