SingleComboBox

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

使用上の注意

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

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

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

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

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

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

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

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

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

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

Don't

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

状態

無効（disabled）

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

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

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

選択肢にない値の追加

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

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

Props

SingleComboBox props

items必須

ComboBoxItem<T>[]

選択可能なアイテムのリスト

name

string

input 要素の name 属性の値

disabled

false true

input 要素の disabled 属性の値

required

false true

input 要素の required 属性の値

className

string

コンポーネント内の一番外側の要素に適用するクラス名

error

false true

true のとき、コンポーネントの外枠が DANGER カラーになる

creatable

false true

true のとき、 items 内に存在しないアイテムを新しく追加できるようになる

placeholder

string

input 要素の placeholder 属性の値

isLoading

false true

true のとき、ドロップダウンリスト内にローダーを表示する

width

string number

input 要素の width スタイルに適用する値

dropdownHelpMessage

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ドロップダウンリスト内に表示するヘルプメッセージ

dropdownWidth

string number

ドロップダウンリストの width スタイルに適用する値

onChangeInput

(e: ChangeEvent<HTMLInputElement>) => void

input 要素の value が変わった時に発火するコールバック関数

onAdd

(label: string) => void

items 内に存在しないアイテムが追加されたときに発火するコールバック関数

onSelect

(item: ComboBoxItem<T>) => void

アイテムが選択された時に発火するコールバック関数

onChange非推奨

(e: ChangeEvent<HTMLInputElement>) => void

input 要素の value が変わった時に発火するコールバック関数 @deprecated onChange は非推奨なため、代わりに onChangeInput を使用してください。

selectedItem必須

ComboBoxItem<T>

選択されているアイテム

defaultItem

ComboBoxItem<T>

デフォルトで選択されるアイテム

prefix

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

コンポーネント内の先頭に表示する内容

onClear

() => void

選択されているアイテムがクリアされた時に発火するコールバック関数

onClearClick

(e: MouseEvent<Element, MouseEvent>) => void

選択されているアイテムがクリアされた時に発火するコールバック関数指定している場合、クリア時にonClickを実行せずにonClearClickのみ実行する

onChangeSelected

(selectedItem: ComboBoxItem<T>) => void

選択されているアイテムのリストが変わった時に発火するコールバック関数

onFocus

() => void

コンポーネントがフォーカスされたときに発火するコールバック関数

onBlur

() => void

コンポーネントからフォーカスが外れた時に発火するコールバック関数

decorators

DecoratorsType<"noResultText"> & { destroyButtonIconAlt?: (text: string) => string; }

コンポーネント内のテキストを変更する関数/

プロダクト

ページ内目次

SingleComboBox