コンボボックスとは何ですか？

テキスト入力欄とドロップダウンリストを組み合わせたUIコンポーネント。選択肢から選ぶこともできるし、自由にテキストを入力することもできる。検索フォームや住所入力などで使われる。

コンボボックスのポイントは？

テキストフィールドとドロップダウンリストを組み合わせた（Combo=組み合わせ）UI部品。入力補完（オートコンプリート）と組み合わせてサジェスト機能として使われることが多い。純粋に選択のみならドロップダウン・セレクトボックス、自由入力のみならテキストフィールド。HTML標準には` `があるが純粋なコンボボックスは` `タグで実現

コンボボックスって何？

テキスト入力とドロップダウンのリストを組み合わせたUI部品。都道府県の選択をイメージすると、リストから「東京都」を選ぶこともできるし、「東」と入力するとサジェストが絞り込まれる、みたいなもの。「Combo（コンボ）」は2つを組み合わせたという意味。

セレクトボックスとの違いは？

セレクトボックス（` `）は選択肢のリストから選ぶだけで、自由テキスト入力はできない。コンボボックスは入力とリスト選択の両方ができる。Googleの検索バーも入力しながらサジェストが出てくるコンボボックス的なUI。

【こんぼぼっくす】

コンボボックスとは？

💡 テキスト入力とドロップダウン選択を「合体させた」UIコンポーネント

📌 このページのポイント

テキストフィールドとドロップダウンリストを組み合わせた（Combo=組み合わせ）UI部品
入力補完（オートコンプリート）と組み合わせてサジェスト機能として使われることが多い
純粋に選択のみならドロップダウン・セレクトボックス、自由入力のみならテキストフィールド
HTML標準には``）は選択肢のリストから選ぶだけで、自由テキスト入力はできない。コンボボックスは入力とリスト選択の両方ができる。Googleの検索バーも入力しながらサジェストが出てくるコンボボックス的なUI。

ひよこ

HTMLでどう実装するの？

ペンギン先生

HTML標準では``と``タグを組み合わせて実装できる。``で基本的なコンボボックスになる。より高機能なものはReact SelectやVue Select などのUI ライブラリを使う。

ひよこ

コンボボックスとオートコンプリートって同じもの？

ペンギン先生

似ているけど厳密には違うんだ。コンボボックスは「選択肢の中から選ぶ＋自由入力もできる」UI要素。オートコンプリートは「入力中に候補を提示する」機能。コンボボックスにオートコンプリート機能が付いていることが多いから混同されやすいね。実はWAI-ARIAのアクセシビリティガイドラインではコンボボックスの実装パターンが詳細に定められていて、キーボード操作（上下キーで選択、Escで閉じる、Enterで確定）を正しく実装しないとスクリーンリーダー利用者が使えないんだ。UI ライブラリを使う理由の一つだよ。

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

コンボボックスって出てきたら「テキスト入力とドロップダウンリストを組み合わせたUI コンポーネント、入力補完機能でよく使われる」と思えばOK！

📖 おまけ：英語の意味

「Combo Box」＝組み合わせボックス（テキスト+リスト）

💬 GUIが普及した1980年代にMacintosh・Windows向けUIとして登場。「Combo（組み合わせ）」はテキストフィールドとリストボックスを組み合わせたことを指す

← 用語集にもどる

コンボボックス とは？

コンボボックスとは？