KARAKURIDESIGN SYSTEM

ToggleGroup

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

2
Variants
5
Sizes
S/M
Mode
Radix
Base

Playground

Preview
outlineD
Type
Variant
Size
Radius
Direction
State
Label
Weight
<ToggleGroup type="single" variant="outline" defaultValue="grid">
  <ToggleGroupItem value="grid" aria-label="Grid view">
    <LayoutGrid />
  </ToggleGroupItem>
  <ToggleGroupItem value="list" aria-label="List view">
    <List />
  </ToggleGroupItem>
</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, タスク管理アプリ

States

Default

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

Disabled

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

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

全アイテム無効States

ToggleGroupItem

value必須
string

アイテムの一意な値

disabledfalse
boolean

個別の無効States

variant親から継承
"default" | "outline"

個別のスタイル上書き

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

個別のサイズ上書き

radius親から継承
"none" | "sm" | ... | "full"

個別の角丸上書き

fontWeight親から継承
"normal" | "semibold"

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

Customization

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

横パディングの変更

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

Icon Onlyの幅変更

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

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

ToggleGroup vs ButtonGroup

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

用途

ToggleGroup: オン/オフStatesの管理

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

States管理

ToggleGroup: 自動 (Radix管理)

ButtonGroup: 手動 (selected prop)

選択モード

ToggleGroup: single / multiple

ButtonGroup: 手動制御のみ

value管理

ToggleGroup: value / onValueChange

ButtonGroup: なし

ユースケース

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

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

使い分けのポイント： Statesを保持したい（選択/非選択）場合は ToggleGroup、 クリック時にアクションを実行したい場合は ButtonGroup を使用します。