ComboBox
- SmartHR UI v21.4.5
- Storybook
- ソースコード（GitHub）
Props
MultiComboBox props
| Name | Required | Type | Description |
|---|---|---|---|
| items | true | ComboBoxItem<T>[] | 選択可能なアイテムのリスト |
| selectedItems | true | (ComboBoxItem<T> & { deletable?: boolean; })[] | 選択されているアイテムのリスト |
| name | - | string | input 要素の `name` 属性の値 |
| disabled | - | false,
true | input 要素の `disabled` 属性の値 |
| error | - | false,
true | `true` のとき、コンポーネントの外枠が `DANGER` カラーになる |
| creatable | - | false,
true | `true` のとき、 `items` 内に存在しないアイテムを新しく追加できるようになる |
| placeholder | - | string | input 要素の `placeholder` 属性の値 |
| isLoading | - | false,
true | `true` のとき、ドロップダウンリスト内にローダーを表示する |
| selectedItemEllipsis | - | false,
true | 選択されているアイテムのラベルを省略表示するかどうか |
| width | - | string,
number | input 要素の `width` スタイルに適用する値 |
| inputValue | - | string | テキストボックスの `value` 属性の値。 `onChangeInput` と併せて設定することで、テキストボックスの挙動が制御可能になる。 |
| className | - | string | コンポーネント内の一番外側の要素に適用するクラス名 |
| onChange | - | (e: ChangeEvent<HTMLInputElement>) => void | input 要素の `value` が変わった時に発火するコールバック関数 @deprecated `onChange` は非推奨なため、代わりに `onChangeInput` を使用してください。 |
| onChangeInput | - | (e: ChangeEvent<HTMLInputElement>) => void | input 要素の `value` が変わった時に発火するコールバック関数 |
| onAdd | - | (label: string) => void | `items` 内に存在しないアイテムが追加されたときに発火するコールバック関数 |
| onDelete | - | (item: ComboBoxItem<T>) => void | 選択されているアイテムの削除ボタンがクリックされた時に発火するコールバック関数 |
| onSelect | - | (item: ComboBoxItem<T>) => void | アイテムが選択された時に発火するコールバック関数 |
| onChangeSelected | - | (selectedItems: ComboBoxItem<T>[]) => void | 選択されているアイテムのリストが変わった時に発火するコールバック関数 |
| onFocus | - | () => void | コンポーネントがフォーカスされたときに発火するコールバック関数 |
| onBlur | - | () => void | コンポーネントからフォーカスが外れた時に発火するコールバック関数 |
SingleComboBox props
| Name | Required | Type | Description |
|---|---|---|---|
| items | true | ComboBoxItem<T>[] | 選択可能なアイテムのリスト |
| selectedItem | true | ComboBoxItem<T> | 選択されているアイテムのリスト |
| name | - | string | input 要素の `name` 属性の値 |
| disabled | - | false,
true | input 要素の `disabled` 属性の値 |
| error | - | false,
true | `true` のとき、コンポーネントの外枠が `DANGER` カラーになる |
| creatable | - | false,
true | `true` のとき、 `items` 内に存在しないアイテムを新しく追加できるようになる |
| placeholder | - | string | input 要素の `placeholder` 属性の値 |
| isLoading | - | false,
true | `true` のとき、ドロップダウンリスト内にローダーを表示する |
| width | - | string,
number | input 要素の `width` スタイルに適用する値 |
| className | - | string | コンポーネント内の一番外側の要素に適用するクラス名 |
| onChange | - | (e: ChangeEvent<HTMLInputElement>) => void | input 要素の `value` が変わった時に発火するコールバック関数 @deprecated `onChange` は非推奨なため、 代わりに `onChangeInput` を使用してください。 |
| onChangeInput | - | (e: ChangeEvent<HTMLInputElement>) => void | input 要素の `value` が変わった時に発火するコールバック関数 |
| onAdd | - | (label: string) => void | `items` 内に存在しないアイテムが追加されたときに発火するコールバック関数 |
| onSelect | - | (item: ComboBoxItem<T>) => void | アイテムが選択された時に発火するコールバック関数 |
| onClear | - | () => void | 選択されているアイテムがクリアされた時に発火するコールバック関数 |
| onChangeSelected | - | (selectedItem: ComboBoxItem<T>) => void | 選択されているアイテムのリストが変わった時に発火するコールバック関数 |