UI Component Lab入力
Listbox リストボックス
開いたままの選択肢のリストから、1つ（または複数）を選ぶ部品。
デモ
別名
- ListBox — React Aria
- <select size> — HTML
見分けるポイント
枠の中に複数の選択肢が見えていて、収まらない分はスクロールする。選んだ選択肢は色が変わる。
バリエーション
- 複数選択
- 複数の選択肢を選べるもの。APG のパターンでは Space でフォーカス中の選択肢の選択を切り替える。ネイティブの <select> では multiple 属性を付ける（キー操作はブラウザによって異なる）。
挙動
- 選択肢をクリックするか、矢印キーで移ると選ばれる。
- このデモは size 属性を付けたネイティブの <select> なので、開閉せず、ブラウザはリストボックスとして扱う。
キーボード操作
| キー | 動作 |
|---|---|
| ↑ / ↓ | 前後の選択肢へ移り、選ぶ。 |
| Home / End | 最初または最後の選択肢へ移る。 |
| A–Z | 入力した文字で始まる選択肢へ移る。 |
使い分け・注意点
- 選択肢が5つを超えるなら Home / End、7つを超えるなら文字入力での移動にも対応させる。
- フォーカスの移動と同時に選ぶ作りは単一選択に限る。役に立つ場面もあるが、かえってひどく使いにくくなる場面もある。
似た部品との違い
出典
- WAI-ARIA APG: Listbox Pattern (最終確認日: )
- MDN: <select> (最終確認日: )