# Tabs

Switches between panels of related content in the same place, such as the sections of a record. Only one panel is visible at a time. To switch a setting instead of content, use [Segmented control](/components/segmented-control.md).

```tsx
// demo.tsx
import {Tabs} from '@earendil-works/elanor-react';

export default function TabsDemo() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List aria-label="Project details">
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="activity">Activity</Tabs.Tab>
        <Tabs.Tab value="billing">Billing</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="overview">Website redesign · 3 members · 8 open tasks</Tabs.Panel>
      <Tabs.Panel value="activity">Alex added a task: Review the homepage.</Tabs.Panel>
      <Tabs.Panel value="billing">Free plan · No payment method required</Tabs.Panel>
    </Tabs.Root>
  );
}
```

## Usage

```tsx
import {Tabs} from '@earendil-works/elanor-react';

<Tabs.Root defaultValue="overview">
  <Tabs.List aria-label="Project details">
    <Tabs.Tab value="overview">Overview</Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel value="overview" />
</Tabs.Root>;
```

Each Tab's `value` matches a Panel. Name the List with `aria-label`. Arrow keys move between tabs. `Tabs.Indicator` underlines the active tab.

## Links

To render tabs as links, pass `nativeButton={false}` and a link to `render`. Set Root's `value` from the current route, and render the page in one Panel.

```tsx
<Tabs.Root value={tab}>
  <Tabs.List aria-label="Project details">
    <Tabs.Tab value="overview" nativeButton={false} render={<a href="/project/overview" />}>
      Overview
    </Tabs.Tab>
    <Tabs.Tab value="activity" nativeButton={false} render={<a href="/project/activity" />}>
      Activity
    </Tabs.Tab>
    <Tabs.Indicator />
  </Tabs.List>
  <Tabs.Panel value={tab}>{page}</Tabs.Panel>
</Tabs.Root>
```

## API

### `Tabs.Root`

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `orientation` | `'horizontal'` | - | Only horizontal is supported. |

Also accepts Base UI [`Tabs.Root`](https://base-ui.com/react/components/tabs.md) props.

### `Tabs.List`

Accepts Base UI [`Tabs.List`](https://base-ui.com/react/components/tabs.md) props.

### `Tabs.Tab`

Accepts Base UI [`Tabs.Tab`](https://base-ui.com/react/components/tabs.md) props.

### `Tabs.Indicator`

Accepts Base UI [`Tabs.Indicator`](https://base-ui.com/react/components/tabs.md) props.

### `Tabs.Panel`

Accepts Base UI [`Tabs.Panel`](https://base-ui.com/react/components/tabs.md) props.