MultiComboBox

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

SmartHR UI

Storybook GitHub

別画面で開く

処理中

ドラッグして幅を変更

ドラッグして高さを変更

処理中

使用上の注意

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

複数選択の場合に使用する

値を単一選択させたい場合はSingleComboBoxを使用してください。

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

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

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

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

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

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

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

Don't

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

状態

無効（disabled）

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

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

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

選択肢にない値の追加

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

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

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

input 要素の属性

プロダクト

MultiComboBox