Design Pattern
セレクト
セレクトは、候補が事前に決まっていて、その中から 1 つを選んでもらうときの基本パターンです。ネイティブの select 要素を使うことで、キーボード操作、支援技術対応、モバイルの選択 UI を自然に利用できます。
いつ使う / 使わない
使うべきとき
- 選択肢が固定で、ユーザーに自由入力をさせたくない場合
- 都道府県、問い合わせ種別、ステータスなど定義済みの値を選ばせる場合
- モバイルでも安定した選択 UI を使いたい場合
使わないべきとき
- 候補数が多く検索が必要な場合 → コンボボックスを使う
- 複数選択が主目的の場合 → チェックボックスグループを使う
- 選択肢が 2 個だけの場合 → ラジオボタンやスイッチの方が分かりやすい
構造（Anatomy）
1 ラベル
2 select 要素本体
3 初期未選択オプション
4 ヘルプテキスト / エラー
- ラベル — 選択の意味を明確にする。placeholder のような曖昧な表現で済ませない
- select — ネイティブのコントロールを優先して使う
- 未選択オプション — 必須項目では disabled selected の先頭オプションを置くと状態が明確になる
- 補足テキスト — aria-describedby で入力の条件やエラーを関連付ける
HTML 構造
重要なポイント
- label で目的を明示する
- 必須のときは先頭に「選択してください」オプションを置き、未選択状態を見える化する
- 候補がカテゴリに分かれる場合は optgroup を使う
- カスタム UI をかぶせる前に、ネイティブの操作性を損なっていないか確認する
CSS 実装
状態別のスタイル設計
- デフォルト — 入力可能であることが明確な境界線を持たせる
- フォーカス — :focus-visible でリングを付け、キーボード操作時の位置を示す
- エラー — 赤枠とテキストメッセージを組み合わせる
- 密度 — 矢印や余白を詰めすぎず、タップしやすさを確保する
アクセシビリティ
WCAG 1.3.1 情報及び関係性
ラベル、グループ、補足説明をプログラム的に関連付けること。
WCAG 3.3.2 ラベル又は説明
何を選ぶコントロールなのかを、表示テキストとして明確にする。
WCAG 3.3.1 エラーの特定
未選択エラー時は、どの項目を選ぶべきかを具体的に伝える。
キーボード操作
- Tab でセレクトに移動
- ↑ / ↓ で候補を選択
- Enter または Space で開閉するブラウザもある
ライブデモ
基本のセレクト
固定候補から 1 つを選ぶ最小構成。ラベルと補足説明を関連付けた基本形です。
必須選択とエラー表示
未選択状態を残したまま blur した時に、項目単位でエラーを伝えるパターンです。
optgroup で候補を整理
候補をカテゴリ単位で分けて、一覧性を上げるパターンです。
よくある間違い
ラベルなしで設置する
先頭オプションの文言だけでは項目の意味が伝わらない。必ずラベルを付ける。
初期値が勝手に選ばれている
必須項目なのに先頭候補が最初から選ばれていると、未確認のまま送信されやすい。
装飾のためにネイティブ挙動を壊す
見た目だけを優先して独自実装に置き換えると、モバイルや支援技術での操作性を失いやすい。