Tabs
同じ領域でコンテクスト全体を切り替える排他的な UI。「新規メモ作成 / メモ履歴」「新規 SMS 作成 / SMS 履歴」のように、扱うオブジェクトや作業モードを切り替える場面で使います。
プレビュー
タブをクリックすると、下のコンテンツ領域が切り替わります。
新規メモを作成するフォームを表示する領域です。
状態
各タブが取りうる見え方。Normal は非選択、Hover はマウスオーバー中、 Selected は現在開いているタブです。
Normal
Hover
Selected
実装例
import {
Tabs,
TabsContent,
TabsList,
TabsTrigger,
} from "@/components/ui/tabs";
function MemoTabs() {
return (
<Tabs defaultValue="new-memo">
<TabsList>
<TabsTrigger value="new-memo">新規メモ作成</TabsTrigger>
<TabsTrigger value="memo-history">メモ履歴</TabsTrigger>
</TabsList>
<TabsContent value="new-memo">{/* 新規メモ作成フォーム */}</TabsContent>
<TabsContent value="memo-history">{/* 履歴一覧 */}</TabsContent>
</Tabs>
);
}仕様
タブリスト(コンテナ)
- border-bottom1px solid #D1D5DB (border)
- gap0px
- 配置inline-flex / 左揃え
各タブ
- height40px (tabs/height = component-size-m)
- padding (左右)16px (tabs/padding = spacing-xs)
- font14px / Medium / line-height 1
- color (Normal)#6B7280 (text-secondary)
- color (Hover)#1F2937 (text-primary)
- color (Selected)#0066CC (secondary-blue) — 下線と同色
- hover bgrgba(31, 41, 55, 0.08) + radius 4px (Normal 時のみ)
- selected underline2px solid #0066CC (secondary-blue)、コンテナの 1px 線を覆う形で配置
- focus (キーボード)secondary-blue の outline ring (offset -2px)
利用基準
使うべき時
- 同じ領域で扱うオブジェクトや作業モードを切り替える(例: 「新規メモ作成」と「メモ履歴」)
- 選択肢が 2〜5 個程度で、ラベルが短く意味の対比が明確な場面で使う
- 1 つしか開けない、排他的な切り替えに使う
- 切り替え直後にすぐ下のコンテンツが入れ替わる場面で使う
使わない時
- 同じオブジェクトの集計単位や見せ方を切り替える → Segmented Control を使う
- 選択肢が多い (6+) → ナビゲーション項目や Select を検討する
- コンテンツが切り替わらず、状態を保存対象として扱う → Radio Button を使う
- 1 ページ内に複数組を入れ子で配置する(階層が分かりにくくなる)