UI Component Lab English

← コンポーネント一覧

入力

Combobox コンボボックス

候補リスト付きのテキスト入力欄。候補から選ぶことも、自由に入力することもできる。

別名

  • Autocomplete — MUI

見分けるポイント

テキスト入力欄の見た目で、右端に下向きの矢印があることもある。文字を入力するか矢印を押すと、下に候補のリストが出る。

挙動

  • 文字を入力すると、その文字で始まる候補が出る。
  • 候補を選ぶと入力欄に入る。リストにない値をそのまま使うこともできる。
  • 矢印キーで候補を選んでいる間も、キーボードのフォーカスは入力欄に残る。
  • HTML の <input list> と <datalist> でも簡易的なコンボボックスを作れるが、リストの見た目や動きはブラウザで異なる。

キーボード操作

キー動作
↓候補を開く。開いているときは次の候補を選ぶ。
↑候補を開く。開いているときは前の候補を選ぶ。
Alt + ↓候補を選ばずにリストだけを開く。
Enter選んでいる候補を入力欄に入れ、リストを閉じる。
Escリストを閉じる。閉じているときは入力欄を空にする。

使い分け・注意点

  • 選択肢が多いときに使う。少なければセレクトで足りる。
  • 決まった選択肢を絞り込むだけのものと、自由な入力も受け付けるものの2種類がある。

出典