SingleComboBox

選択肢の中から単一の値を選択するコンポーネントです。テキスト入力によって選択肢を絞り込んだり、選択肢に新たな値を追加できます。

使用上の注意

ユースケースに応じてコンポーネントを使い分ける

単一選択の場合に使用する

値を複数選択させたい場合はMultiComboBoxを使用してください。

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

選択肢の数が6個以上で、ユーザーにテキスト入力で値を追加させたり、値を絞り込んで選択させたい場合はSingleComboBoxを使用します。

選択肢が5個以下であれば、初期状態で選択肢が一覧できるRadioButtonを使用してください。 ただし、RadioButtonを配置する十分スペースがない場合は、SingleComboBoxやSelectの使用を検討します。

入力補助のヒントメッセージとしてプレースホルダを使用しない

SingleComboBoxで入力補助のヒントメッセージを表示したい場合はdropdownHelpMessageやFormControlのhelpMessageを使用し、プレースホルダ（placeholder）は使用しないでください。プレースホルダを使用した場合、テキスト入力するとプレースホルダの内容が確認できなくなるため、入力補助として成立しないためです。

dropdownHelpMessageはドロップダウンパネルを表示したときのみ表示されるため、ヒントメッセージを常に表示したい場合は、FormControlのhelpMessageを使用してください。

Do

ユーザーがテキストを入力しても入力補助としてヒントメッセージを確認できる

Don't

ユーザーがテキストを入力するとプレースホルダが確認できなくなり、入力補助として機能しない

状態

無効（disabled）

入力および選択操作ができない状態を表現したスタイルです。

SingleComboBoxにdisabledを適用すると、テキスト入力不可になりドロップダウンパネルも表示されないため、ユーザーが選択肢を確認できなくなる点に注意してください。

ユーザーはなぜ無効になっているのかわからないことがあります。権限による表示制御のデザインパターンを参考にして、そもそも無効ではなくフォーム自体を非表示にしたり、無効状態の理由を付近に表示することを検討してください。

選択肢にない値の追加

入力された値がリストにない場合、追加して選択できる状態を表現したスタイルです。

ユーザーがその場で選択肢を追加できるようにしたい場合は、SingleComboBoxにcreatableを適用してコールバック関数onAddを適切に実装してください。

Props

SingleComboBox props