7onicDESIGN SYSTEM

Segmented

Segmentedは、排他的な単一選択を提供するピル型のコントロールです。タブやフィルターの切り替えに最適です。

4
Variants
4
Sizes
Single
Mode
Radix
Base

Playground

プレビュー
defaultD
Variant
Size
Radius
Weight
Content
State
<Segmented defaultValue="play">
  <Segmented.Item value="prev">Prev</Segmented.Item>
  <Segmented.Item value="play">Play</Segmented.Item>
  <Segmented.Item value="next">Next</Segmented.Item>
</Segmented>

Variants

defaultPill Style
塗り背景コンテナ（bg-background-muted）に、選択されたアイテムが白背景+シャドウで浮き上がるスタイル。iOS/Apple風。
outlineBordered Style
枠線付きコンテナに、選択されたアイテムがグレー背景で表示。クリーンなボーダースタイル。
underlineTab Style
下線のみで選択を表示。Stripe/GitHub風のミニマルタブスタイル。
ghostMinimal Style
透明コンテナに、選択されたアイテムのみ背景を表示。Notion/Figma風。

Sizes

Text Only

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

Icon Only (正方形)

sm
コンテナ高さ32px
アイテム24px × 24px
アイコン14px
md
コンテナ高さ36px
アイテム28px × 28px
アイコン16px
default
コンテナ高さ40px
アイテム32px × 32px
アイコン16px
lg
コンテナ高さ48px
アイテム40px × 40px
アイコン16px

Icon + Text

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

Features

Use Cases

ステータスフィルター

Notion, Linear, タスク管理アプリ

期間フィルター

Stripe, Google Analytics, ダッシュボード

ビュー切替

Figma, Notion, プロジェクト管理ツール

課金サイクル

SaaS料金ページ、サブスクリプション

// Status Filter — Notion, Linear style
<Segmented defaultValue="all">
  <Segmented.Item value="all">すべて</Segmented.Item>
  <Segmented.Item value="active">有効</Segmented.Item>
  <Segmented.Item value="completed">完了</Segmented.Item>
</Segmented>

// Date Range Filter — Stripe, Analytics style
<Segmented defaultValue="30d">
  <Segmented.Item value="7d">7日</Segmented.Item>
  <Segmented.Item value="30d">30日</Segmented.Item>
  <Segmented.Item value="90d">90日</Segmented.Item>
</Segmented>

// View Switch — Figma, Notion style
<Segmented defaultValue="table">
  <Segmented.Item value="table">テーブル</Segmented.Item>
  <Segmented.Item value="board">ボード</Segmented.Item>
  <Segmented.Item value="calendar">カレンダー</Segmented.Item>
</Segmented>

// Billing Cycle — SaaS pricing style
<Segmented defaultValue="yearly">
  <Segmented.Item value="monthly">月払い</Segmented.Item>
  <Segmented.Item value="yearly">年払い</Segmented.Item>
</Segmented>

States

Default

選択されたアイテムはハイライト表示。

Disabled

全アイテムが無効化された状態。

個別 Disabled

特定のアイテムのみ無効化。

多数のアイテム

2〜5個のアイテムに最適。

API

Component Structure

Segmented— Radix RadioGroup
.ItemProps

Props

Segmented

valueundefined
string

制御モードでの選択値

defaultValueundefined
string

非制御モードでの初期選択値

onValueChangeundefined
(value: string) => void

選択変更時のコールバック

variant"default"
"default" | "outline" | "underline" | "ghost"

スタイルバリアント（default: iOS風, outline: ボーダー風, underline: Stripe風, ghost: Notion風）

size"default"
"sm" | "md" | "default" | "lg"

セグメントのサイズ (32/36/40/48px)

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

角丸のサイズ (6px)

fontWeight"normal"
"normal" | "semibold"

フォントの太さ（全variantでnormalがデフォルト）

disabledfalse
boolean

全アイテム無効状態

Segmented.Item

value—
string

アイテムの一意な値

disabledfalse
boolean

個別の無効状態

sizeinherit
"sm" | "md" | "default" | "lg"

個別のサイズ上書き

radiusinherit
"none" | "sm" | ... | "full"

個別の角丸上書き

contentType"text"
"text" | "icon-text" | "icon"

コンテンツタイプ（icon: 正方形、icon-text: gap付き、text: 標準）

Customization

すべてのアイテムはデザインシステムのスペーシングルールに基づいたデフォルト値を使用します。グループのclassNameで全アイテムを一括カスタマイズできます。

横パディングの変更

className="[&>button]:px-10"

Icon Onlyの幅変更

className="[&>button]:aspect-auto [&>button]:px-5"

Tip：デフォルト値はコンポーネントの一貫性を保つよう設計されています。UI実装上カスタマイズが必要な場合にご活用ください。

Anatomy

1
2
Week
3
Month
Year
1
Root
ピル型トラック（コンテナ）
2
Item
個別セグメント（未選択）
3
Active Indicator
スライドする選択背景

Best Practices

✓

推奨

  • ✓2〜5個の排他的なオプションに使用
  • ✓同じコンテンツエリア内のビュー切替に使用
  • ✓ラベルは短く簡潔に（1〜2語）
  • ✓フィルターやソートの切り替えに最適
✕

避けるべき

  • ✗6個以上のオプションには使用しない
  • ✗ページナビゲーションには使用しない（→ Tabs）
  • ✗複数選択が必要な場合は使用しない（→ ToggleGroup）
  • ✗長いラベルテキストを使用しない

Accessibility

キーボード操作

Tabグループにフォーカス移動
←→
アイテム間を移動・選択
Home最初のアイテムへ移動
End最後のアイテムへ移動

ARIA属性

  • role="radiogroup" 自動付与
  • role="radio" 各アイテムに付与
  • aria-checked 自動更新
  • フォーカスインジケーター

Segmented vs Tabs

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

用途

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

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

構造

Segmented: 単独コンポーネント

Tabs: TabList + TabPanel の組み合わせ

結果

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

Tabs: パネルの切替表示

配置

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

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

Radix Primitive

Segmented: RadioGroup

Tabs: @radix-ui/react-tabs

使い分けのポイント：Segmentedは「同じコンテンツエリア内で表示を変える」場合に使用。Tabsは「異なるコンテンツパネルを切り替える」場合に使用します。