Usage

Props

Name	Type	Required	Description
afterHide	((e?: Event) => void)	false
afterShow	(() => void)	false
beforeHide	BeforeCallback	false	since 10.19.0
beforeShow	BeforeCallback	false	since 10.19.0
block	boolean	false	Make the Select button 100% width since 10.19.0
container	HTMLElement	false	since 10.19.0
disabled	boolean	false	default false since 10.19.0
emptyMessage	string	false	When there are no children this will render since 10.19.0
error	boolean	false	default false since 10.19.0
footer	ReactNode	false	since 10.19.0
hideDelay	number	false	since 10.19.0
i18nScope	string	false	The i18n key to use for the select's configurable strings. Defaults to using the core library's default strings. since 10.19.0
loading	boolean	false	If the select is loading default false since 10.19.0
onScrollBottom	((e: UIEvent<HTMLDivElement, UIEvent>) => void)	false
onSelect	((selection: Selection) => any)	false
optgroups	OptionGroup[]	false	Array of available option groups since 10.19.0
options	Option[]	false	Array of available options since 10.19.0
optionsRef	RefObject<HTMLDivElement>	false	since 10.19.0
placeholder	string	false	Renders when the label is blank since 10.19.0
placement	DropdownPlacement	false	The placement of the overlay default 'bottom-left' since 10.19.0
qa	Partial<QaTags>	false	since 10.19.0
showDelay	number	false	since 10.19.0
tabIndex	number	false	Configurable tabIndex for the select button default 0 since 10.19.0
value	Option	true	Currently selected value since 10.19.0
getColor	Function	false	A function returning the display color of an option's `Pill` `(option: unknown) => PillColor` defaultvalue `(option) => (option as PillOption).color` since 10.19.0
getGroup	Function	false	A function returning group ID for a given option to define a relation to `optgroups` `(option: unknown) => string \| number` defaultvalue `(option) => (option as PillOption).groupId` since 10.19.0
getId	Function	false	A function returning ID of a given option `(option: unknown) => string \| number` defaultvalue `(option) => (option as PillOption).id` since 10.19.0
getLabel	Function	false	A function returning label of an option `(option: unknown) => string` defaultvalue `(option) => (option as PillOption).label` since 10.19.0
getSuggested	Function	false	A function returning `boolean` value to suggest this option if nothing is selected. `(option: unknown) => boolean` defaultvalue `(option) => (option as PillOption).suggested` since 10.19.0
groupGetId	Function	false	A function returning the ID of a group `(group: unknown) => string \| number` defaultvalue `(group) => (group as PillOptgroup).id` since 10.19.0
groupGetLabel	Function	false	A function returning label of a group `(group: unknown) => string` defaultvalue `(group) => (group as PillOptgroup).label` since 10.19.0
onClear	Function	false	It is possible for this component to have an empty value (render placeholder). Enables the x icon. since 10.19.0
onSearch	Function	false	Adds a search bar to the select. since 10.19.0

For a simple PillSelect, the default expected shape of each option is

options

optgroups

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.