ComboBox

SmartHR UI

Storybook GitHub

別画面で開く

処理中

ドラッグして幅を変更

ドラッグして高さを変更

処理中

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; }

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

inputAttributes

input 要素の属性

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

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

decorators

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

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

inputAttributes

input 要素の属性