KARAKURIDESIGN SYSTEM

Segmented

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

4
Variants
4
Sizes
Single
Mode
Radix
Base

Playground

Preview
defaultD
Variant
Size
Radius
Weight
Content
State
<Segmented defaultValue="play">
  <SegmentedItem value="prev">Prev</SegmentedItem>
  <SegmentedItem value="play">Play</SegmentedItem>
  <SegmentedItem value="next">Next</SegmentedItem>
</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

Statesフィルター

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

期間フィルター

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

ビュー切替

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

課金サイクル

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

States

Default

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

Disabled

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

個別 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

全アイテム無効States

SegmentedItem

value必須
string

アイテムの一意な値

disabledfalse
boolean

個別の無効States

size親から継承
"sm" | "md" | "default" | "lg"

個別のサイズ上書き

radius親から継承
"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実装上カスタマイズが必要な場合にご活用ください。

Segmented vs Tabs

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

用途

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

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

構造

Segmented: 単独コンポーネント

Tabs: TabList + TabPanel の組み合わせ

結果

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

Tabs: パネルの切替表示

配置

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

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

Radix Primitive

Segmented: RadioGroup

Tabs: @radix-ui/react-tabs

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