7onicDESIGN SYSTEM

ToggleGroup

ToggleGroupは、複数のToggleをグループ化してオン/オフを管理するコンポーネントです。単一選択または複数選択モードをサポートします。

2
Variants
5
Sizes
S/M
Mode
Radix
Base

Playground

プレビュー
outlineD
Type
Variant
Size
Radius
Direction
State
Label
Weight
<ToggleGroup type="single" variant="outline" defaultValue="grid">
  <ToggleGroup.Item value="grid" aria-label="Grid view">
    <LayoutGrid />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="list" aria-label="List view">
    <List />
  </ToggleGroup.Item>
</ToggleGroup>

Types

Single
1つだけ選択可能。テキストの配置など排他的な選択に使用。
Multiple
複数選択可能。テキストの書式設定など同時適用可能なオプションに使用。

Variants

Default
境界線なしのシンプルなスタイル。ツールバーやコンパクトなUIに最適。
Outline
ボーダー付きでアタッチされたスタイル。明確なグループ感が必要な場合に使用。

Sizes

Icon Only

xs
高さ28px
横パディング10px
アイコン14px
sm
高さ32px
横パディング12px
アイコン14px
md
高さ36px
横パディング14px
アイコン16px
default
高さ40px
横パディング16px
アイコン16px
lg
高さ48px
横パディング24px
アイコン16px

Icon + Text

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

Features

Use Cases

Grid / List 表示切替

Finder, Dropbox, ECサイトの商品一覧

Row / Column レイアウト

Figma, Framer, Flexbox方向切替

Card / Compact / Detail

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

// Grid/List toggle - Finder, Dropbox style
<ToggleGroup type="single" variant="outline" defaultValue="grid">
  <ToggleGroup.Item value="grid" aria-label="Grid view">
    <LayoutGrid />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="list" aria-label="List view">
    <List />
  </ToggleGroup.Item>
</ToggleGroup>

// Row/Column layout - Figma, Framer style
<ToggleGroup type="single" variant="outline" defaultValue="rows">
  <ToggleGroup.Item value="rows" aria-label="Rows">
    <Rows />
  </ToggleGroup.Item>
  <ToggleGroup.Item value="columns" aria-label="Columns">
    <Columns />
  </ToggleGroup.Item>
</ToggleGroup>

// Card/Compact/Detail - Gmail, Notion style
<ToggleGroup type="single" variant="outline" defaultValue="card">
  <ToggleGroup.Item value="card" aria-label="Card view"><Grid /></ToggleGroup.Item>
  <ToggleGroup.Item value="compact" aria-label="Compact view"><List /></ToggleGroup.Item>
  <ToggleGroup.Item value="detail" aria-label="Detail view"><Rows /></ToggleGroup.Item>
</ToggleGroup>

States

Default

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

Disabled

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

個別 Disabled

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

Multiple 選択

複数のアイテムを同時に選択可能。

Orientation

Horizontal (デフォルト)

Vertical

API

Component Structure

ToggleGroup— Radix ToggleGroup
.ItemProps

Props

ToggleGroup

type—
"single" | "multiple"

単一選択 or 複数選択モード

valueundefined
string | string[]

制御モードでの選択値

defaultValueundefined
string | string[]

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

onValueChangeundefined
(value) => void

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

variant"default"
"default" | "outline"

アイテムの視覚スタイル

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

アイテムのサイズ (28/32/36/40/48px)

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

角丸のサイズ (6px)

fontWeight"normal"
"normal" | "semibold"

フォント太さ。全アイテムに適用。個別ItemのfontWeightで上書き可能

orientation"horizontal"
"horizontal" | "vertical"

レイアウト方向

disabledfalse
boolean

全アイテム無効状態

ToggleGroup.Item

value—
string

アイテムの一意な値

disabledfalse
boolean

個別の無効状態

variantinherit
"default" | "outline"

個別のスタイル上書き

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

個別のサイズ上書き

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

個別の角丸上書き

fontWeightinherit
"normal" | "semibold"

個別のフォント太さ上書き

Customization

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

横パディングの変更

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

Icon Onlyの幅変更

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

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

Anatomy

1
2
3
1
Root
グループコンテナ
2
Toggle Item
個別トグルボタン
3
Active Item
選択中のアイテム

Best Practices

✓

推奨

  • ✓単一選択には type="single" を使用
  • ✓複数選択には type="multiple" を使用
  • ✓各アイテムに aria-label を設定
  • ✓関連するオプションをグループ化
✕

避けるべき

  • ✗5つ以上のアイテムを含めない
  • ✗無関係なオプションを混在させない
  • ✗ナビゲーションには使用しない（→ Tabs）
  • ✗単一選択でSegmentedの代わりに使わない

Accessibility

キーボード操作

Tabグループにフォーカス移動
Spaceアイテムのオン/オフ切替
Enterアイテムのオン/オフ切替
←→↑↓
アイテム間を移動

ARIA属性

  • role="group" 自動付与
  • aria-pressed 自動付与
  • data-orientation 自動付与
  • aria-label 推奨

ToggleGroup vs ButtonGroup

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

用途

ToggleGroup: オン/オフ状態の管理

ButtonGroup: アクションボタンのグループ化

状態管理

ToggleGroup: 自動 (Radix管理)

ButtonGroup: 手動 (selected prop)

選択モード

ToggleGroup: single / multiple

ButtonGroup: 手動制御のみ

value管理

ToggleGroup: value / onValueChange

ButtonGroup: なし

ユースケース

ToggleGroup: テキスト配置、フォーマット

ButtonGroup: ページネーション、ツールバー

状態を保持したい（選択/非選択）場合は ToggleGroup、クリック時にアクションを実行したい場合は ButtonGroup を使用します。