セレクトボックス(概要)

仕様
パーツ

- セレクトボックス 
- 項目ラベル 
- 要否ラベル 
- サポートテキスト 
- ドロップダウンアイコン 
- エラーテキスト 
※展開時に表示されるリストはOSデフォルトのスタイルを使用してください。
オプションリストの実装
オプションリストに規定のスタイルはありません。OSの標準のUIを採用してください。
使い方
設計の原則
- あまりに長いリストは特にモバイルデバイスでの使い勝手を下げてしまうため、事前の質問により選択肢を減らせないか検討してください。
- リストが5つ以下の場合は、ラジオボタンの使用を推奨します。タップやクリックをせずに選択肢の全体が見え、選択がより簡単になります。
- ラベルテキストは入力項目を端的に表現してください。入力項目が1つしかなく、その意味を画面タイトルなどで明確に説明できる場合は省略可能です。
良い例

選択肢が6個の場合にセレクトボックスを使用しています。
悪い例

選択肢が2つしかないのに、セレクトボックスを使用しています。選択肢が5個以下の場合は、ラジオボタンを使用してください。
各種リソース
| 種別 | リソース | 状態 | 
|---|---|---|
| デザイン | デザインデータ(Figma) | 提供中 | 
| 実装 | ソースコード(HTML+CSS) | 提供中 | 
| サンプル(HTML+CSS) | 提供中 | |
| ソースコード(React+Tailwind CSS) | 提供中 | |
| サンプル(React+Tailwind CSS) | 提供中 |