| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| afterHide | ((e?: Event) => void) | false | ||
| afterShow | (() => void) | false | ||
| aria-labelledby | string | false | ||
| beforeHide | BeforeCallback | false | ||
| beforeShow | BeforeCallback | false | ||
| block | boolean | false | ||
| className | string | false | ||
| disabled | boolean | false | ||
| emptyMessage | string | false | ||
| error | boolean | false | ||
| footer | ReactNode | false | ||
| getGroup | ((option: any) => string | number) | false | ||
| getId | ((option: any) => string | number) | false | ||
| getLabel | ((option: any) => string) | false | ||
| loading | boolean | false | ||
| onBlur | FocusEventHandler<HTMLDivElement> | false | ||
| onFocus | FocusEventHandler<HTMLDivElement> | false | ||
| onScrollBottom | ((e: UIEvent<HTMLDivElement, UIEvent>) => void) | false | ||
| onSearch | ((e: ChangeEvent) => void) | false | ||
| optgroups | GroupItem[] | false | Array of available option groups | |
| options | any[] | false | Array of available options | |
| placeholder | string | false | ||
| placement | false | |||
| qa | QaTags | false | ||
| tabIndex | number | false | ||
| value | any[] | false | Array of the currently selected values | |
| groupHeaderRenderer | Function | false | Callback for rendering header for each entry in | |
| isOptionDisabled | Function | false | ||
| onChange | Function | false | ||
| optionRenderer | Function | false | ||
| tokenRenderer | Function | false | Callback for rendering each selected value
|
For a simple MultiSelect, the default expected shape of each option is
You can create a full width MultiSelect by using the block attribute.
If you have an array of custom object shapes, you can use getId and getLabel to configure which fields each option is rendered with.
Pass optgroups of format { id: string, label: string } and give each option a respective groupId field.
Providing your own onSearch will override the default search behavior. You can use this to fetch data, manage the loading state, or do custom filtering.
Override group header view with groupHeaderRenderer, use getGroup to use a custom group field.
Use tokenRenderer to customize value tokens.
11.4.0