| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| afterHide | ((e?: Event) => void) | false | ||
| afterShow | (() => void) | false | ||
| beforeHide | BeforeCallback | false | ||
| beforeShow | BeforeCallback | false | ||
| block | boolean | false | Make the Select button 100% width | |
| container | HTMLElement | false | ||
| disabled | boolean | false | ||
| emptyMessage | string | false | When there are no children this will render | |
| error | boolean | false | ||
| footer | ReactNode | false | ||
| hideDelay | number | false | ||
| i18nScope | string | false | The i18n key to use for the select's configurable strings. Defaults to using the core library's default strings. | |
| loading | boolean | false | If the select is loading | |
| onScrollBottom | ((e: UIEvent<HTMLDivElement, UIEvent>) => void) | false | ||
| onSelect | false | |||
| optgroups | OptionGroup[] | false | Array of available option groups | |
| options | Option[] | false | Array of available options | |
| optionsRef | RefObject<HTMLDivElement> | false | ||
| placeholder | string | false | Renders when the label is blank | |
| placement | false | The placement of the overlay | ||
| qa | Partial<QaTags> | false | ||
| restoreFocusOnHide | boolean | "core-react" | "react-aria-focus-scope" | false | Restore focus to the target after the overlay is hidden. 'core-react' will use internal logic to restore focus, 'react-aria-focus-scope' will use 'FocusScope' component from '@react-aria', true will use both. | |
| showDelay | number | false | ||
| tabIndex | number | false | Configurable tabIndex for the select button | |
| value | Option | true | Currently selected value | |
| getColor | Function | false | A function returning the display color of an option's | |
| getGroup | Function | false | A function returning group ID for a given option to define a relation to | |
| getId | Function | false | A function returning ID of a given option
| |
| getLabel | Function | false | A function returning label of an option
| |
| getSuggested | Function | false | A function returning | |
| groupGetId | Function | false | A function returning the ID of a group
| |
| groupGetLabel | Function | false | A function returning label of a group
| |
| onClear | Function | false | It is possible for this component to have an empty value (render placeholder). Enables the x icon. | |
| onSearch | Function | false | Adds a search bar to the select. |
For a simple PillSelect, the default expected shape of each option is
Pass optgroups of format { id: string | number, label: string } and give each option a respective groupId field.
In other aspects, PillSelect extends Select component. To see more examples for the rest of props visit Select component props section.
10.19.0