# Tabs

Switches between related views.

[View source and API](https://github.com/tempoxyz/ds/blob/main/src/web/components/Tabs.tsx)

## Overview

Tabs are a segmented tab list that switches between related views, built on Base UI Tabs.

Use them for related content. Use links for page navigation.

## Examples

### Basic

```tsx
import { Tabs } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List aria-label="Sections">
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="activity">Activity</Tabs.Tab>
        <Tabs.Tab value="settings">Settings</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="overview">Overview content</Tabs.Panel>
      <Tabs.Panel value="activity">Activity content</Tabs.Panel>
      <Tabs.Panel value="settings">Settings content</Tabs.Panel>
    </Tabs.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tabs/Basic.tsx)

### Size

Set `size` on `Tabs.List` to `small`, `medium`, or `large`. It defaults to `medium`.

```tsx
import { Stack, Tabs } from '@tempoxyz/ds'
import { Plus } from '@tempoxyz/ds/icons'

export function Demo() {
  return (
    <Stack align="start" gap="6">
      {(['small', 'medium', 'large'] as const).map((size) => (
        <Tabs.Root defaultValue="overview" key={size}>
          <Tabs.List aria-label={`Sections ${size}`} size={size}>
            <Tabs.Tab value="overview">Overview</Tabs.Tab>
            <Tabs.Tab value="activity">
              <Plus />
              Activity
            </Tabs.Tab>
            <Tabs.Tab disabled value="settings">
              Settings
            </Tabs.Tab>
            <Tabs.Indicator />
          </Tabs.List>
          <Tabs.Panel value="overview">Overview content</Tabs.Panel>
          <Tabs.Panel value="activity">Activity content</Tabs.Panel>
        </Tabs.Root>
      ))}
    </Stack>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tabs/Size.tsx)

### Disabled

Set `disabled` on a `Tabs.Tab` to skip it during selection.

```tsx
import { Tabs } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Tabs.Root defaultValue="overview">
      <Tabs.List aria-label="Sections">
        <Tabs.Tab value="overview">Overview</Tabs.Tab>
        <Tabs.Tab value="activity">Activity</Tabs.Tab>
        <Tabs.Tab disabled value="settings">
          Settings
        </Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
      <Tabs.Panel value="overview">Overview content</Tabs.Panel>
      <Tabs.Panel value="activity">Activity content</Tabs.Panel>
    </Tabs.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tabs/Disabled.tsx)

### Expand

Set `expand` on `Tabs.List` to stretch the tabs across the available width. It defaults to `false`.

```tsx
import { Tabs } from '@tempoxyz/ds'

export function Demo() {
  return (
    <Tabs.Root defaultValue="1d" style={{ width: '20rem !custom' }}>
      <Tabs.List aria-label="Range" expand>
        <Tabs.Tab value="1d">1D</Tabs.Tab>
        <Tabs.Tab value="1w">1W</Tabs.Tab>
        <Tabs.Tab value="1m">1M</Tabs.Tab>
        <Tabs.Indicator />
      </Tabs.List>
    </Tabs.Root>
  )
}
```

[View example source](https://github.com/tempoxyz/ds/blob/main/docs/src/examples/demos/Tabs/Expand.tsx)

## Guidelines

TODO: Write guidelines for Tabs.