Select

selectの代わりに使用するコンポーネントです。Inputと見た目を揃えるために存在します。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

選択肢が6個以上の場合に使用する

基本的に選択肢の数が6個以上になる場合はSelectを使用します。初期状態では選択肢を一覧できないことに注意してください。

ユーザーがスムーズに操作できるよう、選択肢の数に応じてSelectコンポーネント以外の使用も考えられます。

選択肢が5個以下の場合

一般的に人は4±1個の情報のまとまりまでしか短期的に記憶できないと言われています。選択肢が5個以下であれば、初期状態で選択肢が一覧できるRadioButtonの使用を推奨します。 ただし、RadioButtonで配置するスペースがない場合はSelectも使用可能です。

選択肢の数が不定の場合

ユーザーの設定や条件によって選択肢の数が増減するなど、実装時に数を固定できない場合は、想定される最大数を考慮して使用するコンポーネントを判断してください。

SingleComboBoxとの使い分け

単一選択かつ、ユーザーに選択肢をフィルタリングさせたい場合はSingleComboBoxの使用を検討してください。

Props

options必須
(Option<T> | Optgroup<T>)[]

選択肢のデータの配列

onChangeValue
(value: T) => void

フォームの値が変わったときに発火するコールバック関数

error
falsetrue

フォームの値にエラーがあるかどうか

width
stringnumber

コンポーネントの幅

size
"s""default"

コンポーネントの大きさ

hasBlank
falsetrue

空の選択肢を表示するかどうか

decorators
DecoratorsType<"blankLabel">

コンポーネント内の文言を変更するための関数を設定