---
title: "Tabs"
description: "Switches between views of the same context without reloading. Base UI manages the tablist, the panels and keyboard focus."
kind: component
id: C-029
registry: "tabs"
docs: "https://koten.codehive.com.co/components/tabs"
markdown: "https://koten.codehive.com.co/md/components/tabs.md"
install: "npx shadcn@latest add https://koten.codehive.com.co/r/tabs.json"
language: en
---

# Tabs · タブ

> Component C-029 in the Koten UI catalog.

Switches between views of the same context without reloading. Base UI manages the tablist, the panels and keyboard focus.

> Japanese labels in this page are documentation metadata. Keep the consumer UI in the product's language and do not add Japanese decoration unless the user asks (R-031).

## Install

Install `koten-theme` first when the project does not have Koten tokens yet. Use the runner of your project.

```bash
# Node
npx shadcn@latest add https://koten.codehive.com.co/r/tabs.json

# Bun
bunx shadcn@latest add https://koten.codehive.com.co/r/tabs.json
```

## Files

- `@/components/ui/tabs.tsx`
- `@/lib/koten/cn.ts`
- `@/lib/koten/format.ts`
- `@/lib/koten/intl.ts`
- `@/lib/koten/labels.ts`
- `@/lib/koten/provider.tsx`

## Reference

- Upstream primitive: https://base-ui.com/react/components/tabs

## Examples

### Controlled view

The consumer holds the value; the visible panel is announced when the tab changes.

```tsx
<Tabs
  label="Order view"
  value={value}
  onValueChange={setValue}
  items={[
    { value: "summary", label: "Summary", content: <p>Order summary</p> },
    { value: "lines", label: "Lines", content: <p>Order lines</p> },
    { value: "history", label: "History", content: <p>Order history</p> },
  ]}
/>
```

### Disabled tab

Base UI skips the disabled tab from the keyboard and keeps the rest navigable.

```tsx
<Tabs
  label="Order view"
  defaultValue="summary"
  items={[
    { value: "summary", label: "Summary", content: <p>Order summary</p> },
    { value: "lines", label: "Lines", content: <p>Order lines</p> },
    {
      value: "history",
      label: "History",
      content: <p>History is unavailable for this order.</p>,
      disabled: true,
    },
  ]}
/>
```

## Props

| Prop | Type | Default | Notes |
| --- | --- | --- | --- |
| `label` | `string` | `—` | Applied as the aria-label of the tablist. |
| `items` | `TabItem[]` | `—` | Each item defines value, label, content and an optional disabled. |
| `defaultValue` | `string` | `—` | Initial value when the component is uncontrolled. |
| `value` | `string` | `—` | Controlled value; requires onValueChange. |
| `onValueChange` | `(value: string) => void` | `—` | Receives the value of the active tab. |
| `className` | `string` | `—` | Applied to the Base UI root. |

## Accessibility

- label becomes the aria-label of the tablist.
- Base UI exposes tablist, tab and tabpanel, with roving tabindex and the arrow, Home and End keys.
- The active tab is marked with a border, weight and color; it does not rely on color alone.
- A disabled tab is skipped from the keyboard and receives no focus.

## Sources

- Catalog page: https://koten.codehive.com.co/components/tabs
- Markdown: https://koten.codehive.com.co/md/components/tabs.md
- Repository: https://github.com/codehive-colombia/koten