kaze風
Select
セレクトボックス
プレビュー
使いどころ
使う場面
- 選択肢が 6 件から 10 件程度で、1 つだけ選ぶ入力（都道府県の絞り込み、並び順など）
- 送信ボタンで確定するフォームの 1 項目
- モバイルでは OS 標準のピッカーが開くので、選択肢が多くても操作しやすい
使わない場面
- 選択肢が 5 件以下で全部見せたいとき。Radio（送信で確定）か SegmentedControl（即時反映）を使う
- 選択肢が 10 件を大きく超えるとき、または名前で探したいとき（取引先、郵便の地名）。Combobox を使う
- 複数選択。Checkbox の並びか FilterPill を使う
- 操作の実行（並べ替えて今すぐ反映など、メニューから実行）。Dropdown を使う
使い方
<Select>
<option>選択肢1</option>
<option>選択肢2</option>
</Select>プロパティ
| 名前 | 型 | デフォルト | 説明 |
|---|---|---|---|
error | boolean | false | エラー状態を表示するかどうか |
children | React.ReactNode | なし | optionエレメント |
型と必須かどうかはソースの型定義から自動で生成しています。表にない HTML 標準の属性（className や aria-* など）も、ルート要素にそのまま渡せます。
キーボード操作
| キー | 動作 |
|---|---|
| Tab | フォーカスを移す |
| ↑ / ↓ | 選択肢を切り替える（開いていれば候補を移動する） |
| Space / Alt + ↓ | 選択肢の一覧を開く（ブラウザ標準の操作） |
| 文字キー | その文字で始まる選択肢へ移る |
アクセシビリティ
- ブラウザ標準の select なので、読み上げと操作はブラウザに任せられる。独自の一覧は描画しない
- ラベルは必ず用意する。FormField で包むと label と関連付く
- error と aria-invalid の両方で赤枠が付く。エラー文言も添える
文言
- 先頭に「選択してください」のような案内の option を置き、value を空にする。必須項目なら送信時に未選択を検出できる
- 選択肢は短い名詞で、並びに意味を持たせる（五十音、利用頻度、時系列のいずれか 1 つ）