UI Component Lab English

← コンポーネント一覧

入力

Select セレクトボックス

開いたリストから選択肢を1つ選ぶ部品。

別名

見分けるポイント

現在の値を表示した箱の右端に下向きの矢印がある。開くと選択肢のリストが出る。

挙動

  • 箱をクリックするとリストが開き、選択肢を選ぶと閉じて値が変わる。
  • 選べるのはリストにある値だけで、自由入力はできない。
  • このデモはネイティブの <select> 要素を使っているため、リストの見た目は OS やブラウザで異なる。

キーボード操作

キー動作
↑ / ↓選択肢を切り替える（環境によってはリストを開く）。
Space / Enterリストを開く。開いているときは選択中の項目を確定する。
A–Z入力した文字で始まる選択肢に移る。
Esc変更せずにリストを閉じる。

使い分け・注意点

  • 選択肢が5つ以下ならラジオボタンを使う。2択にはセレクトを使わない。
  • ラジオボタン: セレクトは選択肢をリストにしまって場所を取らず、ラジオボタンはすべての選択肢を常に見せる。
  • メニュー: セレクトは選んだ選択肢をフォームの値として保持し、メニューは項目を選ぶと操作を実行する。
  • コンボボックス: セレクトはリストの選択肢からしか選べないが、コンボボックスは文字を入力でき、リストにない値も使える。
  • リストボックス: セレクトボックスは開くまで選んだ値しか見えず、リストボックスは複数の選択肢を常に見せておく。

出典