Tabs
Tabsは、関連するコンテンツをパネルごとに切り替えて表示するナビゲーションコンポーネントです。 3つのバリアントと4つのサイズで、さまざまなレイアウトに対応します。
Playground
Account settings content
<Tabs defaultValue="account">
<TabsList>
<TabsTrigger value="account">Account</TabsTrigger>
<TabsTrigger value="settings">Settings</TabsTrigger>
<TabsTrigger value="notifications">Notifications</TabsTrigger>
</TabsList>
<TabsContent value="account">
<p className="text-sm text-text-muted">Account settings content</p>
</TabsContent>
<TabsContent value="settings">
<p className="text-sm text-text-muted">General settings content</p>
</TabsContent>
<TabsContent value="notifications">
<p className="text-sm text-text-muted">Notification preferences</p>
</TabsContent>
</Tabs>Variants
line
Content for tab 1
enclosed
Content for tab 1
pill
Content for tab 1
Sizes
smmddefaultlg| Size | 高さ | フォント | 横パディング | プレビュー |
|---|---|---|---|---|
sm | 32px | 13px | 12px | |
md | 36px | 13px | 14px | |
default | 40px | 14px | 16px | |
lg | 48px | 16px | 24px |
Features
Fitted
Account content
With Icons
Account settings
Disabled
Active tab content
API
Component Structure
Tabs— Radix Tabs.ListPropsタブリスト（variant・size・color・radius・fitted）.TriggerPropsタブボタン.ContentPropsタブパネルProps
Tabs (Root)
defaultValueundefinedstringデフォルトで選択されるタブの値（非制御モード）
valueundefinedstring選択されたタブの値（制御モード）
onValueChangeundefined(value: string) => voidタブ変更時のコールバック
orientation"horizontal""horizontal" | "vertical"タブの向き
activationMode"automatic""automatic" | "manual"タブの活性化モード（automaticはフォーカスで即切替、manualはEnter/Space）
| Name | Type | Default | Description |
|---|---|---|---|
defaultValue | string | undefined | デフォルトで選択されるタブの値（非制御モード） |
value | string | undefined | 選択されたタブの値（制御モード） |
onValueChange | (value: string) => void | undefined | タブ変更時のコールバック |
orientation | "horizontal" | "vertical" | "horizontal" | タブの向き |
activationMode | "automatic" | "manual" | "automatic" | タブの活性化モード（automaticはフォーカスで即切替、manualはEnter/Space） |
TabsList
variant"line""line" | "enclosed" | "pill"タブリストのビジュアルスタイル
size"default""sm" | "md" | "default" | "lg"タブトリガーのサイズ
color"default""default" | "primary"アクティブインジケーターの色（lineバリアント専用）
radius"md""none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full"角丸設定（enclosed: 上部角丸 none〜xl、pill: コンテナ角丸 全9段階）
fittedfalsebooleanタブを親の幅いっぱいに均等配置
| Name | Type | Default | Description |
|---|---|---|---|
variant | "line" | "enclosed" | "pill" | "line" | タブリストのビジュアルスタイル |
size | "sm" | "md" | "default" | "lg" | "default" | タブトリガーのサイズ |
color | "default" | "primary" | "default" | アクティブインジケーターの色（lineバリアント専用） |
radius | "none" | "sm" | "base" | "md" | "lg" | "xl" | "2xl" | "3xl" | "full" | "md" | 角丸設定（enclosed: 上部角丸 none〜xl、pill: コンテナ角丸 全9段階） |
fitted | boolean | false | タブを親の幅いっぱいに均等配置 |
TabsTrigger
value—stringタブの一意な識別値（必須）
disabledfalsebooleanタブを無効化
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | タブの一意な識別値（必須） |
disabled | boolean | false | タブを無効化 |
TabsContent
value—string対応するタブの値（必須）
forceMountundefinedboolean非アクティブ時もDOMに保持（アニメーション用）
| Name | Type | Default | Description |
|---|---|---|---|
value | string | — | 対応するタブの値（必須） |
forceMount | boolean | undefined | 非アクティブ時もDOMに保持（アニメーション用） |
Tabs vs Segmented
似たような見た目ですが、用途と構造が異なります。適切なコンポーネントを選択してください。
用途
Tabs: コンテンツナビゲーション
Segmented: 値の選択（フィルター、切替）
構造
Tabs: TabList + TabPanel の組み合わせ
Segmented: 単独コンポーネント
結果
Tabs: パネルの切替表示
Segmented: 同じエリア内のデータ変更
配置
Tabs: ページ/セクションの上部
Segmented: コンテンツ内、どこでも
Radix Primitive
Tabs: @radix-ui/react-tabs
Segmented: RadioGroup
| 特徴 | Tabs | Segmented |
|---|---|---|
| 用途 | コンテンツナビゲーション | 値の選択（フィルター、切替） |
| 構造 | TabList + TabPanel の組み合わせ | 単独コンポーネント |
| 結果 | パネルの切替表示 | 同じエリア内のデータ変更 |
| 配置 | ページ/セクションの上部 | コンテンツ内、どこでも |
| Radix Primitive | @radix-ui/react-tabs | RadioGroup |
使い分けのポイント： Tabsは「異なるコンテンツパネルを切り替える」場合に使用。 Segmentedは「同じコンテンツエリア内で表示を変える」場合に使用します。 見た目が似ている場合（Tabs pill vs Segmented default）でも、TabsContentパネルの有無で選択してください。