7onicDESIGN SYSTEM

Tabs

Tabsは、関連するコンテンツをパネルごとに切り替えて表示するナビゲーションコンポーネントです。3つのバリアントと4つのサイズで、さまざまなレイアウトに対応します。

3
Variants
4
Sizes
2
Orientation
Radix
Base

Playground

Preview
D

Account settings content

Variant
Size
Color
Options
<Tabs defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account">Account</Tabs.Trigger>
    <Tabs.Trigger value="settings">Settings</Tabs.Trigger>
    <Tabs.Trigger value="notifications">Notifications</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="account">
    <p className="text-sm text-text-muted">Account settings content</p>
  </Tabs.Content>
  <Tabs.Content value="settings">
    <p className="text-sm text-text-muted">General settings content</p>
  </Tabs.Content>
  <Tabs.Content value="notifications">
    <p className="text-sm text-text-muted">Notification preferences</p>
  </Tabs.Content>
</Tabs>

Variants

line

Content for tab 1

<Tabs defaultValue="tab1">
  <Tabs.List variant="line">
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm text-text-muted">Content for tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm text-text-muted">Content for tab 2</p>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <p className="text-sm text-text-muted">Content for tab 3</p>
  </Tabs.Content>
</Tabs>

enclosed

Content for tab 1

<Tabs defaultValue="tab1">
  <Tabs.List variant="enclosed">
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm text-text-muted">Content for tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm text-text-muted">Content for tab 2</p>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <p className="text-sm text-text-muted">Content for tab 3</p>
  </Tabs.Content>
</Tabs>

pill

Content for tab 1

<Tabs defaultValue="tab1">
  <Tabs.List variant="pill">
    <Tabs.Trigger value="tab1">Tab 1</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Tab 2</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Tab 3</Tabs.Trigger>
  </Tabs.List>
  <Tabs.Content value="tab1">
    <p className="text-sm text-text-muted">Content for tab 1</p>
  </Tabs.Content>
  <Tabs.Content value="tab2">
    <p className="text-sm text-text-muted">Content for tab 2</p>
  </Tabs.Content>
  <Tabs.Content value="tab3">
    <p className="text-sm text-text-muted">Content for tab 3</p>
  </Tabs.Content>
</Tabs>

Sizes

sm
高さ32px
フォント13px
横パディング12px
md
高さ36px
フォント13px
横パディング14px
default
高さ40px
フォント14px
横パディング16px
lg
高さ48px
フォント16px
横パディング24px

Features

Fitted

Account content

<Tabs defaultValue="tab1">
  <Tabs.List fitted>
    <Tabs.Trigger value="tab1">Account</Tabs.Trigger>
    <Tabs.Trigger value="tab2">Settings</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Notifications</Tabs.Trigger>
  </Tabs.List>
</Tabs>

With Icons

Account settings

<Tabs defaultValue="account">
  <Tabs.List>
    <Tabs.Trigger value="account"><User /> Account</Tabs.Trigger>
    <Tabs.Trigger value="settings"><Settings /> Settings</Tabs.Trigger>
    <Tabs.Trigger value="notifications"><Bell /> Notifications</Tabs.Trigger>
  </Tabs.List>
</Tabs>

Disabled

Active tab content

<Tabs defaultValue="tab1">
  <Tabs.List>
    <Tabs.Trigger value="tab1">Active</Tabs.Trigger>
    <Tabs.Trigger value="tab2" disabled>Disabled</Tabs.Trigger>
    <Tabs.Trigger value="tab3">Active</Tabs.Trigger>
  </Tabs.List>
</Tabs>

API

Component Structure

Tabs— Radix Tabs
.ListProps.TriggerProps.ContentProps

Props

Tabs (Root)

defaultValueundefined
string

デフォルトで選択されるタブの値（非制御モード）

valueundefined
string

選択されたタブの値（制御モード）

onValueChangeundefined
(value: string) => void

タブ変更時のコールバック

orientation"horizontal"
"horizontal" | "vertical"

タブの向き

activationMode"automatic"
"automatic" | "manual"

タブの活性化モード（automaticはフォーカスで即切替、manualはEnter/Space）

Tabs.List

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段階）

fittedfalse
boolean

タブを親の幅いっぱいに均等配置

Tabs.Trigger

value—
string

タブの一意な識別値（必須）

disabledfalse
boolean

タブを無効化

Tabs.Content

value—
string

対応するタブの値（必須）

forceMountundefined
boolean

非アクティブ時もDOMに保持（アニメーション用）

Anatomy

1
2
3
Overview
4
Settings
History
5
Trigger height40px
Padding X16px
Content gapmt-4
1
Root
ルートコンテナ
2
List
タブバー
3
Trigger
個別タブボタン
4
Indicator
アクティブ下線
5
Content
コンテンツパネル

Best Practices

✓

推奨

  • ✓タブラベルは短く簡潔に（1～2語）
  • ✓関連するコンテンツのグループ化に使用する
  • ✓アイコンでタブの内容を視覚的に補助する
  • ✓デフォルトで最も重要なタブを選択状態にする
✕

避けるべき

  • ✗タブ数を多くしすぎない（5個以下推奨）
  • ✗ページナビゲーション目的にタブを使用しない
  • ✗タブの順序を動的に変更しない
  • ✗タブ内にさらにタブをネストしない

Accessibility

キーボード操作

Tabタブリストにフォーカス / パネルへ移動
←→水平タブ間を移動
↑↓垂直タブ間を移動
Home / End最初 / 最後のタブに移動
Enter / Spaceタブを選択（manualモード時）

ARIA / WCAG

  • role="tablist" / role="tab" / role="tabpanel"
  • aria-selectedで選択状態を自動表示
  • aria-orientationで方向を自動設定
  • disabled タブはキーボードナビゲーションでスキップ

Tabs vs Segmented

似たような見た目ですが、用途と構造が異なります。適切なコンポーネントを選択してください。

用途

Tabs: コンテンツナビゲーション

Segmented: 値の選択（フィルター、切替）

構造

Tabs: TabList + TabPanel の組み合わせ

Segmented: 単独コンポーネント

結果

Tabs: パネルの切替表示

Segmented: 同じエリア内のデータ変更

配置

Tabs: ページ/セクションの上部

Segmented: コンテンツ内、どこでも

Radix Primitive

Tabs: @radix-ui/react-tabs

Segmented: RadioGroup

使い分けのポイント： Tabsは「異なるコンテンツパネルを切り替える」場合に使用。Segmentedは「同じコンテンツエリア内で表示を変える」場合に使用します。見た目が似ている場合（Tabs pill vs Segmented default）でも、Tabs.Contentパネルの有無で選択してください。