トグルボタンとは、押した状態が「持続」し、ON/OFFや選択中/未選択を切り替えるボタン型のUIコンポーネントです。英語の Toggle Button は「切り替えボタン」を意味し、UIでは 現在の選択状態を画面に保持し続ける操作 を指します。
一時的なアクションを実行するButtonとは根本的に異なります。太字・斜体のON/OFF、表示モードの切り替え、フィルタ条件の選択など、「押したあとも選択中であること」を見せたい場面で使います。
この記事を読むと、ToggleとButton・Switch・Checkbox・Radioの正確な使い分け、Pressed状態のA11y設計、Toggle Groupの構成判断が自分でできるようになります。
まず結論：トグルボタンを使う条件
トグルボタンを使う条件は、ユーザーが押した後も「今ONなのか、OFFなのか」をボタン上で確認する必要があることです。状態が残らない保存・送信・削除は Button、設定値を即時に切り替える通知ON/OFFやダークモードは Switch を使います。
検索で「トグルボタンとは」「toggle button」「toggleとは」と調べている人が迷いやすいのは、見た目ではなく役割です。見た目がスイッチ型でも、設定を変えるならSwitchです。見た目がボタン型でも、押した状態が残るならToggle Buttonです。
| 判断質問 | Yesなら | Noなら |
|---|---|---|
| 押した後の状態をボタン上に残す必要がある？ | Toggle Button | Button |
| 設定値そのものを即時にON/OFFする？ | Switch | Toggle ButtonまたはCheckbox |
| 複数項目をフォームとして選ぶ？ | Checkbox | Toggle Button |
| 候補から必ず1つだけ選ぶ？ | Radio Buttonまたは排他Toggle Group | 単体Toggle |
トグルボタンとは
トグルボタン（toggle button）は、クリックやタップによって状態を切り替え、その状態が画面上に残り続けるUIです。代表例は、テキストエディタの太字ボタン、表示モードの切り替え、フィルタ条件のON/OFFです。
「トグルとは何か」を一言でいうと、同じ操作で状態を切り替えることです。UIでは、切り替え後の状態がユーザーに見え続ける場合にトグルボタンを使います。
重要なのは、「押したら何かを実行して終わり」ではなく、「押した後もその状態が続く」ことです。そのため、トグルボタンは現在ONなのかOFFなのか、または選択中なのか未選択なのかを、ユーザーが一目で判断できる必要があります。
| UI | 使う場面 | 状態の考え方 | 代表例 |
|---|---|---|---|
| Toggle Button | 太字、表示切替、フィルタなど状態を保持する操作 | 押した状態が残る | 太字、下線、プレビュー表示 |
| Button | 保存、送信、削除など一度だけ実行する操作 | 押した後に状態を持たない | 保存、送信、削除 |
| Switch | 通知ON/OFFなど設定を即時に切り替える操作 | 設定値そのものを切り替える | 通知、ダークモード、自動保存 |
| Checkbox | 複数選択や同意確認 | 送信前の選択状態を持つ | 利用規約同意、カテゴリ選択 |
| Radio Button | 複数候補から1つだけ選ぶ | 候補のうち1つだけ選択 | 支払い方法、サイズ選択 |
迷ったら「この操作は、押した後の状態を画面に残す必要があるか？」を確認します。必要があるならToggle、ただ実行するだけならButton、設定値のON/OFFなら Switch、複数選択なら Checkbox を検討します。
1. UI例（Preview / Live）
実装で見る（GunjoUI）
この部品を、デザインシステム GUNJO の実装で確かめられます。
実装ライブラリを選ぶときの確認ポイント
Toggle を既存のUIライブラリやデザインシステムで実装する場合も、まずは「押した状態が残るボタン」として扱います。見た目がトグルらしくても、状態を保持できない、支援技術に状態を伝えられない、SwitchやCheckboxと意味が混ざる場合は避けます。
| 観点 | 確認すること | NG例 |
|---|---|---|
| 状態 | pressed / onPressedChange 相当でON/OFFを管理できる | クリック時の見た目だけ変えて状態を持たない |
| A11y | aria-pressed で Pressed / Unpressed を伝えられる | スクリーンリーダーに選択状態が伝わらない |
| 見た目 | ON/OFFの差が背景・枠・文字色で分かる | 色だけが少し変わり、Pressed状態が判別しにくい |
| 境界 | Button / Switch / Checkbox と役割を分けられる | 設定値の即時変更をToggle Buttonで表現する |
| グループ | 複数ONか排他選択かを明確にできる | Toggle Groupなのに全解除できて現在状態が消える |
つまり、実装では「トグルっぽい見た目」より、状態を保持し、支援技術にも状態を伝えられるかを優先します。
2. 定義（Definition）
トグルボタンとは、押すと「Pressed（選択中）」状態になり、もう一度押すまでその状態を保持するボタンです。書式設定・フィルタ選択・表示切替など、状態が持続するインタラクションに使います。
Buttonとの違い：Buttonは押した瞬間にアクションが発火して終わる（状態を持たない）。Toggleは押した後も「オン/オフのどちらか」という状態を保持し続ける。
Switchとの違い：どちらも二値のON/OFFを扱うが、Toggleはエディタの書式設定ボタンのような「コンテンツへの適用」に使い、SwitchはOSの設定トグルのような「システム設定の即時変更」に使う。
Checkboxとの違い：Checkboxはフォーム内で複数項目を選び、送信や保存まで確定を保留する入力です。Toggleはボタンの見た目で「今この機能・表示・書式がONか」を即座に示します。
Radio Buttonとの違い：Radio Buttonは候補の中から必ず1つを選ぶ入力UIです。排他Toggle Groupも似た役割を持ちますが、表示モードや配置切替のように「現在の状態をツールとして示す」場合に使います。
2.1 Toggle UIの比較表
| UI | 主な用途 | 状態の意味 | 迷ったときの判断 |
|---|---|---|---|
| Toggle Button | 押した状態を保持するボタン | 機能・書式・表示状態がON/OFF | 押したボタン自体に選択状態を残したい |
| Switch | 設定を即時反映するON/OFF | システム設定が有効/無効 | 保存ボタンなしで設定が変わる |
| Checkbox | フォーム内の複数選択 | 送信前の選択状態 | 保存・送信まで確定を保留する |
| Radio Button | 排他選択 | 候補のうち1つだけ選択 | 入力フォームで必ず1つ選ぶ |
| Toggle Group | 複数のToggleをまとめる | 複数選択または排他選択 | 表示形式、配置、少数フィルタを切り替える |
3. 使い分け（When to use / When NOT to use）
3.1 When to use
- テキストエディタの書式設定（太字・斜体・下線）のように、コンテンツへのスタイル適用を切り替えるとき
- 複数の選択肢から1つまたは複数を選ぶ Toggle Group（フィルタ・配置・ビュー切替）
- 「選択中かどうか」が見た目で常に分かっている必要があるUI
- アイコンボタンのように小さな領域で、ON/OFF状態と操作対象を同時に伝えたいとき
3.2 When NOT to use
- 即時にシステム設定やアプリ動作が変わる場合（Switch を使う）
- 一時的なアクション実行（保存・削除など）の場合（Button を使う）
- ページ遷移を伴う場合（
<a>/ Link を使う） - フォーム送信まで選択を保留する場合（Checkbox を使う）
- 必ず1つだけ選ばせる入力フォームの場合（Radio Button を使う）
3.3 代替UI（Alternatives）
- システム設定の即時ON/OFF →
Switch - 相互排他の選択肢 →
Radio Button - 複数選択可のチェック →
Checkbox - 少数のフィルタチップや表示切替 →
Toggle Group
4. 設計判断の核（Decision Principles）
「このボタンは状態を持つか？」——持つなら Toggle、持たないなら Button。
判断の優先順位：① 状態保持の必要性 → ② 排他か非排他か → ③ aria-pressedの付与
- Toggle が「ON」であることを 視覚的に必ず明示する（色・背景・アイコン変化の少なくとも1つ）
- 同じグループ内で複数選択可なら「非排他 Toggle」、1つだけ選べるなら「排他 Toggle Group（≒ Radio の意味）」で設計する
- 排他 Toggle Group の場合、1つは必ず選択された状態を維持する（全解除不可が原則）
- ラベルは「状態を表す名詞」より「動作を表す動詞または形容詞」の方が分かりやすい
5. 状態設計（States）
5.1 必須状態（Required）
- Default（Off）：未選択。押せることが見た目で分かる
- Pressed（On）：選択中。背景色・テキスト色・ボーダーで明確に差別化する
- Focus：キーボード操作時にフォーカスリングを表示（省略不可）
- Disabled：操作不可。透明度を下げ
cursor-not-allowedを付与
5.2 条件付き状態（Conditional）
- Hover：マウスオーバー時に背景を微変化させクリッカブルを強調
- Indeterminate：Toggle Group で「一部選択」を示す中間状態（全選択/全解除ボタンと組み合わせる場合）
5.3 State Gallery
| 状態 | 必須 | 何を伝えるか |
|---|---|---|
| Default (Off) | ✅ | 押せる、かつ現在OFFであること |
| Pressed (On) | ✅ | 現在ONであること（視覚的に背景等で強調） |
| Focus | ✅ | キーボードユーザーに今ここにいることを示す |
| Disabled | ✅ | 操作不可であること |
| Hover | — | マウスユーザーへのクリッカブル強調 |
| Indeterminate | — | 一部のみ選択中の中間状態を示す |
6. バリエーション設計（Variants）
Toggle は「単体」か「グループ」かで設計が大きく変わる。
| バリアント | 目的 | 選択ルール |
|---|---|---|
| Single Toggle | 1つのON/OFFを独立して切り替え | 相互に影響しない |
| Toggle Group（非排他） | 書式設定など複数同時ON可 | 0〜全て選択可 |
| Toggle Group（排他） | 配置・ビュー切替など1つだけ | 常に1つ選択維持 |
禁止パターン：排他 Toggle Group で全解除できる設計 → 「どれが現在の状態か」が失われる。
7. パターン集（Good / Bad / How to fix）
7.0 よく崩れる設計パターン（3つ）
- Pressed状態の視覚的区別が弱い：色変化だけでは色覚多様性のユーザーに伝わらない。形状・背景・テキスト色の複合変化が必要
- aria-pressed の欠落：見た目が変わっても
aria-pressedがなければスクリーンリーダーは状態変化を読み上げられない - 排他グループで全解除可能：全て OFF になる瞬間があり「現在の設定が不明」になる
7.1 Bad（典型3つ）
- 書式設定ツールバーで「太字ON」の見た目変化がテキスト色だけ → 色覚多様性のユーザーが区別できない
<div>で Toggle を実装しaria-pressedもroleもない → スクリーンリーダーが無視する- 配置選択（左/中/右）の Toggle Group で全部押して全解除できる → どれが現在の配置か不明になる
7.2 Good（対になる3つ）
- Pressed 状態は背景塗りつぶし＋テキスト色の反転を組み合わせる → 色のみに依存しない視覚差
<button aria-pressed={isOn}>を使い、状態変化を DOMに反映させる- 排他 Toggle Group は「常に1つ選択維持」とし、現在選択中の項目はクリックしても解除されないロジックにする
7.3 How to fix（手順）
- 対象ボタンが「状態を保持するか」を確認 → 保持するなら
<button>にaria-pressedを付与する - Pressed 状態の見た目を「背景色の変化」＋「テキスト色の変化」の2要素以上で設計する
- Toggle Group の場合、排他か非排他かを決める → 排他なら「全解除禁止」のロジックを実装する
focus-visible:outlineでフォーカスリングを確保する
8. ルール（Must / Better）
Must（守らないと壊れる）
Better（品質が跳ねる）
9. アクセシビリティ要件（必須）
Keyboard
Tabでフォーカスでき、SpaceまたはEnterで押下（状態切替）できること- Toggle Group 内は
Tabで各ボタンを移動できること
Focus
- フォーカスリングは周囲と4.5:1以上のコントラストを持つこと
Screen Reader
aria-pressed="true"/aria-pressed="false"を状態に応じて動的に切り替える- アイコンのみの Toggle には
aria-labelを付与する
<!-- 基本パターン -->
<button aria-pressed="true" aria-label="太字">
<svg aria-hidden="true">...</svg>
</button>
Touch / Pointer
- 最小タップ領域 44×44px 以上を確保する
Contrast / Readability
- Default と Pressed の背景色の差が3:1以上のコントラスト比を持つこと（WCAG 1.4.11 Non-text Contrast）
10. 実装メモ（Implementation Notes）
aria-pressedは"true"/"false"の文字列ではなく、true/falseのbooleanで渡す（Reactではaria-pressed={isPressed}で自動変換される）- 排他 Toggle Group は内部的に
role="group"でラップし、グループにaria-labelでコンテキストを与えると読み上げ体験が向上する - Radix UI / shadcn の
ToggleおよびToggleGroupコンポーネントはaria-pressedを自動管理するため、アクセシビリティ対応のコストを大幅に削減できる
11. 関連リンク
- 関連するUIデザイン原則: フィードバック (Feedback), アフォーダンス (Affordance), 視覚的階層 (Visual Hierarchy)
- 用語集（定義）: アクセシビリティ (Accessibility), アフォーダンス (Affordance)
- 関連するUIコンポーネント（横）: Button（ボタン）, Switch（スイッチ）, Checkbox（チェックボックス）, Radio Button（ラジオボタン）, Toggle Group（トグルグループ）, Filter（フィルター）
- 一覧から探す: UIコンポーネント一覧, UIコンポーネント完全ガイド, フォーム設計
12. FAQ
トグルボタンとは何ですか？
トグルボタンとは、押したあとにON/OFFや選択中の状態を保持するボタンです。太字、表示切替、フィルタチップのように、ユーザーが「今どちらの状態か」を見続ける必要があるUIで使います。
Toggle UIとSwitchは何が違いますか？
Toggle UIは、コンテンツや表示状態への適用を切り替えるボタンです。Switchは、通知設定やダークモードのように、操作した瞬間にシステム設定を変更するON/OFFコントロールです。即時に設定が保存・反映されるならSwitch、ツールや表示状態を切り替えるならToggleを使います。
toggle button と checkbox は何が違いますか？
toggle button はボタンの形で現在のON/OFF状態を見せるUIです。checkbox はフォーム内で複数選択や同意を扱う入力で、送信や保存まで確定を保留する文脈に向いています。保存ボタンがあるフォームならCheckbox、操作したボタン自体に状態を持たせたいならToggleが適しています。
トグルはどんなUIで使うべきですか？
テキスト装飾、表示モード、プレビューON/OFF、少数のフィルタチップ、ツールバーの選択状態に向いています。反対に、保存・削除のような単発アクション、ページ遷移、重大な設定変更には使いません。
Switch と Toggle はどう使い分けますか？
Switch は通知設定や公開状態のように、設定そのものを即時に切り替える場合に使います。Toggle はコンテンツへの適用、表示モード、ツールの選択状態など、作業中の状態を保持する場合に使います。
Toggle Buttonを実装するときの必須属性は何ですか？
HTMLでは <button> を使い、状態を aria-pressed={true / false} で伝えます。アイコンだけのToggleには aria-label を付け、Pressed状態は色だけでなく背景・境界線・アイコン変化など複数の手がかりで示します。
13. まとめ
Toggle の設計は「状態が持続するかどうか」という一問に尽きます。迷ったら 4. 設計判断の核 に戻り、「このボタンは状態を保持するか？」を問い直してください。保持するなら aria-pressed の付与と Pressed 状態の視覚的区別が最低ラインです。Toggle Group を使う場合は排他か非排他かを明確に決め、全解除不可のロジックで「現在の状態の明確さ」を守ってください。
