← カテゴリ一覧に戻る

ドロップダウン

select option optgroup datalist

<select> は閉じた選択肢セットから1つ（または複数）を選ぶコントロールです。optgroup で選択肢をカテゴリ分けでき、datalist は自由入力 + 候補提示という異なるアプローチを提供します。

デモ: 基本的な select

<label htmlFor="country">国を選択</label>
<select id="country" name="country" defaultValue="jp">
  <option value="">-- 選択してください --</option>
  <option value="jp">日本</option>
  <option value="us">アメリカ</option>
  <option value="uk">イギリス</option>
</select>

デモ: optgroup によるグループ化

<select id="food" name="food">
  <optgroup label="和食">
    <option value="sushi">寿司</option>
    <option value="ramen">ラーメン</option>
  </optgroup>
  <optgroup label="洋食">
    <option value="pasta">パスタ</option>
    <option value="steak">ステーキ</option>
  </optgroup>
</select>

デモ: multiple 属性（複数選択）

size=5 で表示行数を指定

<select id="skills" name="skills" multiple size={5}>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="react">React</option>
</select>

デモ: datalist（自由入力 + 候補提示）

リストにない値も入力できる点が select と異なる

<input
  id="browser"
  type="text"
  list="browsers"
  placeholder="入力または選択"
/>
<datalist id="browsers">
  <option value="Chrome" />
  <option value="Firefox" />
  <option value="Safari" />
  <option value="Edge" />
</datalist>

select vs datalist vs combobox パターン

コントロール自由入力候補提示適した用途
select不可固定リスト都道府県、月、言語など閉じた選択肢
datalist可サジェストブラウザ名、都市名など開いた候補
combobox (ARIA)可カスタムUI検索フォーム、タグ入力など高度なUI

Tips

  • datalist は自由テキスト入力 + 候補提示が可能で、select のような「厳密に選択肢に限定」とは異なる
  • multiple 属性はリスト表示になり、Ctrl/Cmd+クリックで複数選択できる。UX が直感的でない場合はチェックボックスの使用も検討する
  • size 属性でリスト表示の行数を指定できる（デフォルトは multiple 時 4）
  • 空の option（「選択してください」）を先頭に置き、required を組み合わせると未選択バリデーションが機能する
  • React では defaultValue で初期選択値を設定する（HTML の selected 属性の代わり）

🤖 AIプロンプトテンプレート

以下について、AIへの質問プロンプト例を示します。

- `<select>`・`<datalist>`・カスタム combobox（ARIA）の使い分けを、ユースケース別に教えてください。
- `<optgroup>` で選択肢をグループ化するときの HTML の書き方と、アクセシビリティ上の利点を教えてください。
- `<select multiple>` の UX 上の問題点と、代替としてチェックボックスを使うべき条件を教えてください。
- React で `<select>` の初期選択値を設定するとき `defaultValue` と `value` の違いを教えてください。
- 先頭に空の `<option>`（「選択してください」）を置き `required` と組み合わせるバリデーションの仕組みを教えてください。

⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。

このサイトについて使用ライブラリ一覧☕ Buy Me a Coffee
© UI Memo