tabs API
navigation/tabs.tsx
Tabs
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items* | {} | — | Tabs in order — the first enabled one is selected when no `value`/`defaultValue` is given. |
variant | TabsVariant | "default" | "pills" | "underline" | "buttons" | "glass" | undefined | TabsVariant.Default | Visual style. |
size | TabsSize | "sm" | "md" | "lg" | undefined | TabsSize.Medium | Size preset. |
fullWidth | boolean | undefined | false | Stretch tabs evenly across the container width. |
activationMode | "auto" | "manual" | undefined | auto | 'auto' selects a tab as focus moves to it (default); 'manual' requires Enter/Space — better when switching panels is expensive. |
children | any | — | Render `<TabPanel>` children to get automatic aria wiring. |
Show native HTML props
Native HTML Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | string | undefined | — | Controlled selected key. |
defaultValue | string | undefined | — | Initial key for uncontrolled usage. |
onChange | ((key: string) => void) | undefined | — | Called with the key of the newly selected tab. |
className | string | undefined | — |
TabPanel
Props
| Prop | Type | Default | Description |
|---|---|---|---|
selectedValue | string | undefined | — | Optional when rendered inside `<Tabs>` (read from context). |
children* | React.ReactNode | — | |
keepMounted | boolean | undefined | false | Keep the panel mounted (hidden) when inactive. |
Show native HTML props
Native HTML Props
| Prop | Type | Default | Description |
|---|---|---|---|
value* | string | — | Key of the tab this panel belongs to. |
className | string | undefined | — |