# TabList

Nav landmark tabs for switching views or routes — no panels. Compose `TabList.Tab` rows and an optional `TabList.Menu` overflow trigger. Controlled via `value` / `onChange`.

## Examples

### Default

A short strip of selected and unselected tabs.

```tsx
import { TabList } from '@var-ui/react';

<TabList value={tab} onChange={setTab} label="Sections">
  <TabList.Tab value="overview" label="Overview" />
  <TabList.Tab value="activity" label="Activity" />
</TabList>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

### Overflow menu

Keep primary tabs visible and tuck the rest into `TabList.Menu` — selecting an option updates the same controlled `value`.

```tsx
import { TabList } from '@var-ui/react';

<TabList value={tab} onChange={setTab} label="Sections">
  <TabList.Tab value="overview" label="Overview" />
  <TabList.Tab value="activity" label="Activity" />
  <TabList.Tab value="members" label="Members" />
  <TabList.Menu
    label="More"
    options={[
      { value: 'settings', label: 'Settings' },
      { value: 'billing', label: 'Billing' },
      { value: 'audit', label: 'Audit log' },
    ]}
  />
</TabList>
```

```astro
<!-- No Astro binding yet — use @var-ui/react -->
```

```html
<!-- No HTML demo yet — use @var-ui/react -->
```

## Props

| Name | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| children | ReactNode | no |  | `TabList.Tab` / `TabList.Menu` children. |
| className | string \| undefined | no |  |  |
| hasDivider | boolean \| undefined | no | false | Border on the side opposite the indicator (bottom for horizontal, inline-end for vertical). |
| label | string \| undefined | no | 'Tabs' | Accessible name for the `nav` landmark. |
| layout | "fill" \| "hug" \| undefined | no | 'hug' | `hug` sizes tabs to content; `fill` stretches tabs/menu evenly across the width. |
| onChange | ((value: string) => void) \| undefined | no |  |  |
| orientation | "horizontal" \| "vertical" \| undefined | no | 'horizontal' |  |
| size | ControlSize \| undefined | no | 'md' |  |
| value | string \| undefined | no |  | Selected tab/menu-option value. |

## Accessibility

The root is a `nav` landmark (`label` defaults to `"Tabs"`). Tabs are plain buttons or links with roving tabindex (Arrow / Home / End); link tabs set `aria-current="page"` when selected. `TabList.Menu` options join the same value set for keyboard focus order.