Design Pattern
コンボボックス
コンボボックスは、入力フィールドと候補リストを組み合わせた選択 UI です。候補数が多く、そのままでは見つけにくいときに有効ですが、セレクトより実装難度が高いため、必要な場面に限定して使うべきです。
いつ使う / 使わない
使うべきとき
- 候補数が多く、検索や絞り込みが必要な場合
- ユーザーが一部の文字列だけ覚えていても選択できるようにしたい場合
- 候補提示と自由入力の境界を明確に設計できる場合
使わないべきとき
- 候補が少なく固定的な場合 → セレクトで十分
- 自由入力を許可したくないのに曖昧な入力を残してしまう場合
- キーボード操作と支援技術対応を十分に実装できない場合
構造（Anatomy）
1 ラベル
2 入力欄（role="combobox"）
3 候補リスト（listbox）
4 選択状態 / 展開状態の ARIA 属性
- 入力欄 — 入力と候補提示の中心。aria-expanded や aria-controls を管理する
- 候補リスト — role=listbox と role=option で意味を持たせる
- 状態管理 — ハイライト中の候補、選択済み値、未一致の扱いを定義する
HTML / ARIA 構造
重要なポイント
- 単なる検索ボックスではなく、候補を選ぶウィジェットとして振る舞わせる
- role=combobox、aria-expanded、aria-controls を正しく更新する
- 候補リストのフォーカス移動と選択確定のルールを一貫させる
- 自由入力を許すか、候補からの選択に限定するかを先に決める
CSS 実装
見た目で補助すべき点
- 入力欄 — 通常のテキストフィールドとして違和感なく見せる
- 候補ポップアップ — リストの境界、重なり順、スクロールを明確にする
- アクティブ候補 — hover だけでなくキーボードで追えるハイライトが必要
- 未一致 — 候補なし状態を視覚的にも文言でも伝える
アクセシビリティ
WCAG 4.1.2 名前・役割・値
入力欄と候補リストの役割、展開状態、選択状態を支援技術に伝える必要があります。
WCAG 2.1.1 キーボード
マウスなしでも候補の移動、選択、閉じる操作が完結しなければなりません。
WCAG 3.3.2 ラベル又は説明
検索なのか、候補から選ぶ入力なのかをラベルや説明文で明確にする必要があります。
キーボード操作
- Tab で入力欄に移動
- ↓ で候補へ移動し、Enter で選択
- Escape で候補リストを閉じる
ライブデモ
検索付きコンボボックス
入力値で候補を絞り込みながら選択する、基本的な検索型パターンです。
最近使った候補つき
先頭に頻出候補を出して、業務画面での再入力を短縮するパターンです。
カスタムスタイル
入力欄と候補リストの見た目を揃えて、業務画面らしいトーンに整えたバリエーションです。
よくある間違い
セレクトで十分なのにカスタム実装する
複雑性だけが増え、支援技術対応が弱くなりやすい。
候補リストがキーボードで操作できない
見た目だけのポップアップではコンボボックスとして成立しない。
自由入力と候補選択のルールが曖昧
送信時のデータ品質が崩れ、ユーザーにも「入力できたのか」が伝わりにくい。