kaze風
Tabs
タブナビゲーション
プレビュー
使いどころ
使う場面
- 同じ画面の中で、関連する内容のまとまりを切り替える（概要 / 設定 / 履歴）
- TabGroup に value と onValueChange（非制御なら defaultValue）を渡し、Tab と TabPanel を同じ value で対応させる
- variant は "default"（下線）か "pills"（面）。画面の主要な区切りは default、小さな領域の切り替えは pills
- URL が変わるタブは、Tab に asChild を付けて <a> や Next.js の Link を包む
使わない場面
- フォームの値を選ぶこと。選択肢が 2〜5 個なら SegmentedControl、それ以上なら Select（Tabs は中身を切り替え、SegmentedControl は値を選ぶ）
- 手順を順番に進めること。Stepper を使う
- アプリ全体の移動。Sidebar か Navbar を使う
- タブが 6 個を超えるとき。分類を見直すか、Sidebar や Select に移す
使い方
<TabGroup defaultValue="a">
<Tabs>
<Tab value="a">タブ1</Tab>
<Tab value="b">タブ2</Tab>
</Tabs>
<TabPanel value="a">内容1</TabPanel>
<TabPanel value="b">内容2</TabPanel>
</TabGroup>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
variant | "default" | "pills" | なし | 見た目。default は下線、pills は塗りのピル |
value | string | なし | タブの識別子（Tab / TabPanel） |
defaultValue | string | なし | 初期選択のタブ（TabGroup。非制御） |
onValueChange | (value: string) => void | なし | 選択が変わる時のコールバック（TabGroup） |
asChild | boolean | false | 子要素（リンクなど）にタブの振る舞いを委ねる（Tab） |
children | React.ReactNode | なし | タブの内容 |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | 選択中のタブにフォーカスを移す。次の Tab で TabPanel に移る |
| → / ← | 次 / 前のタブにフォーカスを移し、そのタブを選択する。端では反対側に回る |
| Home / End | 最初 / 最後のタブにフォーカスを移し、選択する |
アクセシビリティ
- role="tablist" / "tab" / "tabpanel" と aria-selected、aria-controls、aria-labelledby が付く。Tab と TabPanel の value を揃えると関連付けが自動で繋がる
- 矢印キーで移動すると同時に選択される（自動選択）。選択のたびに重い処理が走る内容には向かない
- tablist は横方向のみ。縦のタブとして上下キーで操作する用途は想定していない
- タブ名は文字で書く。アイコンだけのタブには aria-label を付ける
文言
- タブ名は 1〜2 語の名詞にする（「概要」「メンバー」「請求」）
- 並列の関係にそろえる。動詞と名詞を混ぜない