ComboBox

選択肢をリスト形式で持ち、ユーザーが入力によって選択肢を絞り込んだり追加したりできるコンポーネントです。

1つしか選択できない SingleComboBox と複数選択できる MultiComboBox に分かれています。

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

Props

MultiComboBox props

items必須
ComboBoxItem<T>[]

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

name
string

input 要素の name 属性の値

disabled
falsetrue

input 要素の disabled 属性の値

required
falsetrue

input 要素の required 属性の値

className
string

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

error
falsetrue

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

creatable
falsetrue

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

placeholder
string

input 要素の placeholder 属性の値

isLoading
falsetrue

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

width
stringnumber

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

dropdownHelpMessage
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

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

dropdownWidth
stringnumber

ドロップダウンリストの 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 を使用してください。

selectedItems必須
(ComboBoxItem<T> & { deletable?: boolean; })[]

選択されているアイテムのリスト

selectedItemEllipsis
falsetrue

選択されているアイテムのラベルを省略表示するかどうか

inputValue
string

テキストボックスの value 属性の値。 onChangeInput と併せて設定することで、テキストボックスの挙動が制御可能になる。

onDelete
(item: ComboBoxItem<T>) => void

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

onChangeSelected
(selectedItems: ComboBoxItem<T>[]) => void

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

onFocus
() => void

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

onBlur
() => void

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

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

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

isItemSelected
(targetItem: ComboBoxItem<T>, selectedItems: ComboBoxItem<T>[]) => boolean

アイテムが選択されたときに選択済みかどうかを判定するコールバック関数/

inputAttributes
Omit<InputHTMLAttributes<HTMLInputElement>, "ref" | "className" | "tabIndex" | "role" | "aria-activedescendant" | "aria-autocomplete" | ... 15 more ... | "type">

input 要素の属性

ref
(instance: HTMLInputElement) => voidRefObject<HTMLInputElement>

SingleComboBox props

items必須
ComboBoxItem<T>[]

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

name
string

input 要素の name 属性の値

disabled
falsetrue

input 要素の disabled 属性の値

required
falsetrue

input 要素の required 属性の値

className
string

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

error
falsetrue

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

creatable
falsetrue

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

placeholder
string

input 要素の placeholder 属性の値

isLoading
falsetrue

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

width
stringnumber

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

dropdownHelpMessage
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

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

dropdownWidth
stringnumber

ドロップダウンリストの 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
stringnumberfalsetrueReactElement<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; }

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

inputAttributes
Omit<Omit<Props & ElementProps, "ref"> & RefAttributes<HTMLInputElement>, "ref" | "className" | "prefix" | ... 16 more ... | "type">

input 要素の属性

ref
(instance: HTMLInputElement) => voidRefObject<HTMLInputElement>