# Tabs

Panelled tabs with underline and pill presentations.

Use Tabs to switch between peer sections that share the same page context. The underline variant uses only an active underline. Use the pill variant for a contained group.

## API

The package declarations define these public members.

| Member | Type | Kind | Required | Default | Description |
| --- | --- | --- | --- | --- | --- |
| `ariaLabel` | `string` | prop | No | `undefined` | aria-only label — Tabs renders no visible caption of its own. |
| `onValueChange` | `(value: T) => void` | callback | No | `undefined` | No additional description. |
| `orientation` | `"horizontal" \| "vertical"` | prop | No | `'horizontal'` | No additional description. |
| `panel` | `Snippet<[{ value: T; }]>` | snippet | No | `undefined` | Renders the active panel. Omit to render panels yourself. |
| `selectWhenFocused` | `boolean` | prop | No | `false` | Activate a tab as soon as it receives focus, rather than on Enter/Space. |
| `size` | `ControlSize` | prop | No | `'md'` | No additional description. |
| `tabs` | `readonly TabItem<T>[]` | prop | Yes | - | No additional description. |
| `value` | `T` | binding | No | `undefined as T | undefined` | Active tab. Two-way bindable; defaults to the first tab. |
| `variant` | `TabsVariant` | prop | No | `'underline'` | No additional description. |

## Related

- [Link](/docs/components/link): Styled native link for body and navigation text.
- [Segmented](/docs/components/segmented): Single-select segmented control.
- [Breadcrumb](/docs/components/breadcrumb): Breadcrumb trail with optional overflow menu.