【こんぼぼっくす】

コンボボックスとは？

最終更新: 2026年10月1日

💡 値の入力・選択と、候補のポップアップを組み合わせる

値を選ぶための入力部と、候補を表示するポップアップを組み合わせたUI。WAI-ARIAでは入力できる型だけでなく、選択だけの型も含みます。自由入力を許すか、候補に限定するかを区別します。

📌 このページのポイント

入力部と開いた候補の表示例です。候補の表示・絞り込み・確定は採用するパターンによって異なり、選択専用型もあります。

ひよこ

コンボボックスって何？

ペンギン先生

値を入力・選択する部分と、候補のポップアップを組み合わせたUIだよ。例えば「東」と入力して都道府県の候補から選ぶものがある。ただし図のような編集可能型だけではなく、選択専用の型もあるんだ。

ひよこ

必ず自由な文字を入力できる？

ペンギン先生

違うよ。WAI-ARIAでは選択専用型もコンボボックスに含める。編集可能型でも、任意の値を許すものと、入力で候補を絞り込みつつ確定値は候補に限定するものがある。入力できることと、どんな値でも受理することは別だね。

ひよこ

selectやdatalistとはどう違う？

ペンギン先生

単一選択のselectは、ブラウザーによって支援技術へコンボボックスとして伝えられる。inputとdatalistは入力に候補を付けるHTMLの仕組みだよ。ただしdatalistだけでは候補外の入力を禁止することにはならないんだ。

ひよこ

自動補完と同じこと？

ペンギン先生

自動補完は入力に候補を提示したり補ったりする動作で、UI全体の名前とは分けよう。WAI-ARIAの編集可能型にも、自動補完なし、リストの候補、行内の補完などの動作がある。候補をいつ開くかや何で確定するかも決める必要があるよ。

ひよこ

実装では何を確かめる？

ペンギン先生

見た目だけでなく、ラベル、現在の値、開いているか、候補との関係が伝わるかを確かめよう。上下キー、Enter、Escなどの動作は選ぶパターンに合わせる。ライブラリを使っても、実際のキーボード操作と支援技術で確認することが大切だよ。

もっと詳しく知りたい人へ

候補を選ばないと送信できないようにするには？

候補に限定する仕様を決め、入力値が許可した値かを検証します。datalistは候補を提示するもので、候補以外を自動で無効にする仕組みではありません。見た目と入力の検証を分けて確認しましょう。

まとめ：ざっくりこれだけ覚えればOK！

「コンボボックス」って出てきたら「値の入力・選択と候補のポップアップを組み合わせたUI」と思えばだいたいOK！

📖 おまけ：英語の意味

「Combo Box」＝組み合わせた入力・選択の部品

💬 Comboは組み合わせという意味です。GUI製品ごとの呼び方と、WAI-ARIAで定義する操作パターンの範囲を区別します。