---
summary: 同じ階層のコンテンツの表示を切り替えるタブ
category: Navigation
---

# Tabs

関連するコンテンツを並列のカテゴリに分けて切り替えるための、タブの並びを表示するコンポーネントです。タブに対応するコンテンツの出し分けは、使う側で行います。
同じ画面の中で表示内容を切り替えるためのもので、別のページへの遷移には LinkButton などを使ってください。

## 基本の使い方

```tsx
import { Tab, TabList, Tabs } from 'wip-ui'

<Tabs>
  <TabList>
    <Tab id="profile">プロフィール</Tab>
    <Tab id="security">セキュリティ</Tab>
  </TabList>
</Tabs>
```

## 構成要素

| 部品 | 役割 |
|---|---|
| Tabs | タブ全体。選択状態を管理する |
| TabList | Tab を横に並べるコンテナ |
| Tab | 各タブの項目 |

## 使う場面

- 関連するコンテンツをカテゴリ別に切り替えて表示し、表示領域が長くなりすぎるのを抑えたいとき
- タブのラベルを見るだけで、コンテンツ全体の概要を把握できるようにしたいとき

## 使い方

### 分類

- [should] タブの項目は互いに関係があり、並列な関係にあるものにする
- [avoid] 順序や手順のある内容（ステップ1、ステップ2 など）をタブで分けない

### 項目

- [should] 項目の数は、タブがコンテンツの幅に収まる範囲でできるだけ少なくする
- [should] 権限不足などで一時的に選べないタブは、isDisabled で選べない状態にする

### ラベル

- [should] ラベルは短く、そのタブの内容を推測できるものにする
- [should] ラベルと、タブに対応するコンテンツの見出しをそろえる
- [avoid] アイコンだけのラベルにしない
- [avoid] アイコンを使うタブと使わないタブを混在させない

## 実装

- 選択中のタブに対応するコンテンツの表示は、Tabs では行わない。Tabs の onSelectionChange で選ばれた Tab の id を受け取り、使う側でコンテンツを出し分ける
- [should] 初期表示のタブを変えるときは、Tabs の defaultSelectedKey に Tab の id を指定する

## Props（自動生成）

型定義から生成した props の一覧です。react-aria-components から引き継いだ props の説明は英語です。DOM の汎用的な属性・イベントは省略しています。

### Tabs

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| ref | Ref<HTMLDivElement> | - | - |
| id | string | - | The element's unique identifier. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id). |
| isDisabled | boolean | - | Whether the TabList is disabled. Shows that a selection exists, but is not available in that circumstance. |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| disabledKeys | Iterable<Key> | - | The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with. |
| onSelectionChange | ((key: Key) => void) | - | Handler that is called when the selection changes. |
| selectedKey | Key \| null | - | The currently selected key in the collection (controlled). |
| defaultSelectedKey | Key | - | The initial selected key in the collection (uncontrolled). |
| keyboardActivation | "automatic" \| "manual" | 'automatic' | Whether tabs are activated automatically on focus or manually. |
| orientation | "horizontal" \| "vertical" | 'horizontal' | The orientation of the tabs. |
| children | ChildrenOrFunction<TabRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | ClassNameOrFunction<TabRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<TabRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| slot | string \| null | - | A slot name for the component. Slots allow the component to receive props from a parent component. An explicit `null` value indicates that the local props completely override all props received from a parent. |

### Tab

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| ref | Ref<HTMLDivElement> | - | - |
| id | Key | - | The unique id of the tab. |
| isDisabled | boolean | - | Whether the tab is disabled. |
| children | ChildrenOrFunction<TabRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| className | ClassNameOrFunction<TabRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<TabRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| href | string | - | A URL to link to. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#href). |
| hrefLang | string | - | Hints at the human language of the linked URL. See[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#hreflang). |
| target | HTMLAttributeAnchorTarget | - | The target window for the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target). |
| rel | string | - | The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). |
| download | string \| boolean | - | Causes the browser to download the linked URL. A string may be provided to suggest a file name. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download). |
| ping | string | - | A space-separated list of URLs to ping when the link is followed. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#ping). |
| referrerPolicy | "" \| "no-referrer" \| "no-referrer-when-downgrade" \| "origin" \| "origin-when-cross-origin" \| "same-origin" \| "strict-origin" \| "strict-origin-when-cross-origin" \| "unsafe-url" | - | How much of the referrer to send when following the link. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#referrerpolicy). |
| routerOptions | undefined | - | Options for the configured client side router. |
| onPress | ((e: PressEvent) => void) | - | Handler that is called when the press is released over the target. |
| onPressStart | ((e: PressEvent) => void) | - | Handler that is called when a press interaction starts. |
| onPressEnd | ((e: PressEvent) => void) | - | Handler that is called when a press interaction ends, either over the target or when the pointer leaves the target. |
| onPressChange | ((isPressed: boolean) => void) | - | Handler that is called when the press state changes. |
| onPressUp | ((e: PressEvent) => void) | - | Handler that is called when a press is released over the target, regardless of whether it started on the target or not. |
| onClick | ((e: MouseEvent<FocusableElement, MouseEvent>) => void) | - | **Not recommended – use `onPress` instead.** `onClick` is an alias for `onPress` provided for compatibility with other libraries. `onPress` provides  additional event details for non-mouse interactions. |

### TabList

| 名前 | 型 | 既定値 | 説明 |
|---|---|---|---|
| ref | Ref<HTMLDivElement> | - | - |
| className | ClassNameOrFunction<TabRenderProps> | - | The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. |
| style | StyleOrFunction<TabRenderProps> | - | The inline [style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style) for the element. A function may be provided to compute the style based on component state. |
| aria-label | string | - | Defines a string value that labels the current element. |
| aria-labelledby | string | - | Identifies the element (or elements) that labels the current element. |
| aria-describedby | string | - | Identifies the element (or elements) that describes the object. |
| aria-details | string | - | Identifies the element (or elements) that provide a detailed, extended description for the object. |
| children | ChildrenOrFunction<TabRenderProps> | - | The children of the component. A function may be provided to alter the children based on component state. |
| items | Iterable<object> | - | Item objects in the collection. |
| dependencies | readonly any[] | - | Values that should invalidate the item cache when using dynamic collections. |