PackagesUIComponents
Tabs
同一ページ内で関連するコンテンツパネルを切り替えるコンポーネント。
いつ使うか
- 同一ページ内で関連するコンテンツを切り替えて表示するときに使用する
- 設定画面のカテゴリ別パネル（「一般」「通知」「セキュリティ」等）に使用する
- 詳細画面で複数の関連情報（「概要」「履歴」「コメント」等）を整理するときに使用する
いつ使わないか
- ページ遷移を伴うナビゲーションには使わない。
Navを使用する - ウィザードのようなステップ進行には使わない。Stepper コンポーネントを使用する
- 1つしかパネルがない場合は使わない。不要なUIの複雑さが増す
- 8つ以上のタブがある場合は、情報設計を見直すか、他のナビゲーションパターンを検討する
Usage
import { Tabs } from '@bi-shop-it/ui/tabs';
<Tabs
items={[
{ value: 'overview', label: '概要', content: <OverviewPanel /> },
{ value: 'history', label: '履歴', content: <HistoryPanel /> },
{ value: 'comments', label: 'コメント', content: <CommentsPanel /> },
]}
/>;Props
Tabs
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
items | TabItem[] | — | タブ定義の配列 |
defaultValue | string | 最初の項目 | 初期選択タブの value（非制御モード） |
value | string | — | 選択中タブの value（制御モード。onValueChange と併用する） |
onValueChange | (value: string) => void | — | タブ切り替え時のコールバック |
variant | 'default' | 'line' | 'default' | 見た目のバリアント。default はピル型、line はアンダーライン型 |
TabItem
| Prop | 型 | デフォルト | 説明 |
|---|---|---|---|
value | string | — | タブを識別する一意の値 |
label | string | — | タブに表示するラベルテキスト |
content | ReactNode | — | タブ選択時に表示するコンテンツ |
icon | IconName | — | ラベルの前に表示するアイコン |
disabled | boolean | false | 無効状態 |
バリエーション
Default（ピル型）
背景色でタブリストを囲み、選択中のタブが浮き上がるスタイル。設定画面やダイアログ内など、コンパクトな切り替えに適している。
概要テキスト。短いコンテンツ。
<Tabs
items={[
{ value: 'general', label: '一般', content: <GeneralSettings /> },
{ value: 'notification', label: '通知', content: <NotificationSettings /> },
{ value: 'security', label: 'セキュリティ', content: <SecuritySettings /> },
]}
/>Line（アンダーライン型）
ボーダーラインで区切り、選択中のタブにアンダーラインを表示するスタイル。詳細画面やページの主要なコンテンツ切り替えに適している。
概要のコンテンツがここに表示される。
<Tabs
variant="line"
items={[
{ value: 'overview', label: '概要', content: <OverviewPanel /> },
{ value: 'history', label: '履歴', content: <HistoryPanel /> },
{ value: 'comments', label: 'コメント', content: <CommentsPanel /> },
]}
/>状態
Disabled
個別のタブを無効化できる。無効化されたタブはクリック・キーボード操作ともに反応しない。
概要のコンテンツがここに表示される。
<Tabs
items={[
{ value: 'overview', label: '概要', content: <OverviewPanel /> },
{
value: 'draft',
label: '下書き',
content: <DraftPanel />,
disabled: true,
},
{ value: 'history', label: '履歴', content: <HistoryPanel /> },
]}
/>アイコン付き
icon を指定すると、ラベルの前にアイコンが表示される。
概要のコンテンツがここに表示される。
<Tabs
items={[
{
value: 'overview',
label: '概要',
icon: 'File',
content: <OverviewPanel />,
},
{
value: 'history',
label: '履歴',
icon: 'Calendar',
content: <HistoryPanel />,
},
{
value: 'comments',
label: 'コメント',
icon: 'Mail',
content: <CommentsPanel />,
},
]}
/>Card で囲む
Tabs はコンテンツパネルにボーダーや背景色を持たない。パネルの境界を明示したい場合は、content を Card で囲む。
一般のコンテンツがここに表示される。
import { Card } from '@bi-shop-it/ui/card';
import { Tabs } from '@bi-shop-it/ui/tabs';
<Tabs
items={[
{
value: 'general',
label: '一般',
content: (
<Card>
<GeneralSettings />
</Card>
),
},
{
value: 'notification',
label: '通知',
content: (
<Card>
<NotificationSettings />
</Card>
),
},
]}
/>;制御モード
value と onValueChange で外部から選択状態を制御できる。
const [activeTab, setActiveTab] = useState('overview');
<Tabs
value={activeTab}
onValueChange={setActiveTab}
items={[
{ value: 'overview', label: '概要', content: <OverviewPanel /> },
{ value: 'history', label: '履歴', content: <HistoryPanel /> },
]}
/>;アクセシビリティ
コンポーネントが内部で処理すること
- Radix UI の Tabs プリミティブに基づき、
role="tablist"・role="tab"・role="tabpanel"を自動的に設定する aria-selectedで選択状態をスクリーンリーダーに伝達するaria-controls/aria-labelledbyでタブとパネルを紐付ける- 矢印キー（Left / Right）でタブ間を移動できる
- Home / End キーで最初 / 最後のタブに移動できる
disabled時にdisabled属性を自動付与し、フォーカスとクリックを無効化する- 装飾アイコンに
aria-hidden="true"を自動付与する
利用者が対応すること
labelはタブの内容が明確に伝わるテキストにすること（「タブ1」のような番号だけは避ける）- タブパネルのコンテンツが非同期で読み込まれる場合は、ローディング状態を適切に表示すること
関連コンポーネント
Nav— ページ遷移を伴うナビゲーションに使用する。Tabs は同一ページ内のコンテンツ切り替え