Select
select要素の代替として選択肢から1つの値を選ばせるドロップダウンコンポーネントです。6個以上の選択肢から1つを選択するときに使います。
Inputと見た目を揃えるために存在します。
使用上の注意
選択肢が6個以上の場合に使用する
基本的に選択肢の数が6個以上になる場合はSelectを使用します。初期状態では選択肢を一覧できないことに注意してください。
ユーザーがスムーズに操作できるよう、選択肢の数に応じてSelectコンポーネント以外の使用も考えられます。詳細は選択コンポーネントの使い分けを参照してください。
選択肢が5個以下の場合
一般的に人は4±1個の情報のまとまりまでしか短期的に記憶できないと言われています。選択肢が5個以下であれば、初期状態で選択肢が一覧できるRadioButtonの使用を推奨します。 ただし、RadioButtonで配置するスペースがない場合はSelectも使用可能です。
選択肢の数が不定の場合
ユーザーの設定や条件によって選択肢の数が増減するなど、実装時に数を固定できない場合は、想定される最大数を考慮して使用するコンポーネントを判断してください。
SingleComboboxとの使い分け
単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合はSingleComboboxの使用を検討してください。
即時反映が期待されるビューの切り替えには使わない
Selectは入力後に、送信や保存といったtype属性がsubmitのボタンなどを押すことで入力内容が反映される場合に使います。即時反映が期待されるビューの切り替えには使わないでください。
ビューの切り替えにはTabBarやSegmentedControl、SideNavを使います。
状態
デフォルト
デフォルト値の「何も入力がない状態で表示する」という考え方に従って、空の状態で表示します。
ユーザーの入力作業が向上したり、ミスを減らせる場合には他の選択肢を設定することを検討します。
アクセシビリティ
開発時の考慮点
FormControlと併用する
Selectコンポーネントは必ずFormControlコンポーネントと併用して、ユーザーが何を選択すべきかを示すラベルを設定してください。FormControlと併用することで、支援技術にも選択の目的が伝達されます。
eslint-plugin-smarthrのsmarthr/a11y-input-in-form-control別タブで開くルールは、SelectにFormControlを組み合わせることを促すものです。支援技術に選択の目的が伝わらないリスクを防ぐため、有効にして使用することを推奨します。
良い実装例
悪い実装例
ラベルとSelectが関連付けられていない場合、スクリーンリーダーでは何を選択するための項目なのかが伝わりません。
関連ページ
使い方チェックリスト
Select
- Should基本的に選択肢の数が 6 個以上になる場合は Select を使う
- Should選択肢が 5 個以下であれば RadioButton の使用を検討する
- RadioButton で配置するスペースがない場合は Select も使用可能
- Should選択肢の数が実装時に固定できない場合は想定される最大数を考慮して使用するコンポーネントを判断する
- Should単一選択かつユーザーに選択肢をフィルタリングさせたい場合は SingleCombobox の使用を検討する
- Avoid即時反映が期待されるビューの切り替えに Select を使わない
- ビューの切り替えには TabBar や SegmentedControl、SideNav を使う
- Shouldデフォルトは空の状態で表示する
- ユーザーの入力作業が向上したりミスを減らせる場合には他の選択肢を設定することを検討する
Props
選択肢のデータの配列
フォームの値が変わったときに発火するコールバック関数
フォームの値にエラーがあるかどうか
コンポーネントの幅
コンポーネントの大きさ
空の選択肢を表示するかどうか
空の選択肢のラベル