Usage

Props

NameTypeRequiredDefaultDescription
afterHide
((e?: Event) => void)
false
afterShow
(() => void)
false
aria-labelledby
string
false
since

11.4.0

beforeHide
BeforeCallback
false
since

10.19.0

beforeShow
BeforeCallback
false
since

10.19.0

block
boolean
false
since

10.19.0

className
string
false
since

10.19.0

disabled
boolean
false
since

10.19.0

emptyMessage
string
false
since

10.19.0

error
boolean
false
since

10.19.0

footer
ReactNode
false
since

10.29.0

groups
any[]
false

Array of available collections, field options contain option id's { id: number label: string options: Option[] groupId?: string | number } arrayOf: [object]

since

10.19.0

loading
boolean
false
since

10.19.0

onBlur
FocusEventHandler<HTMLDivElement>
false
since

10.19.0

onFocus
FocusEventHandler<HTMLDivElement>
false
since

10.19.0

onScrollBottom
((e: UIEvent<HTMLDivElement, UIEvent>) => void)
false
optgroups
GroupItem[]
false

Array of available option groups

options
any[]
false

Array of available options { id: number label: string groupId?: string | number } arrayOf: [object]

since

10.19.0

placeholder
string
false
since

10.19.0

placementfalse
since

10.19.0

qa
QaTags
false
since

10.19.0

tabIndex
number
false
since

10.19.0

value
any[]
false
since

10.19.0

getGroup
Function
false

Callback for each entry in groups for keying and optimizations (option: T) => Option[]

since

10.19.0

getId
Function
false
since

10.19.0

getLabel
Function
false

Callback for each entry in options to generate the token label, also used for default searching. (option: T) => string

since

10.19.0

getOptGroup
Function
false

Callback for each entry in groups and options to define relation in optgroups (option: OptionItem) => number | string

since

10.19.0

groupRenderer
Function
false

Callback for rendering each group option (groupOption: T, props: OptionRendererProps) => React.ReactNode

since

10.19.0

isOptionDisabled
Function
false
since

10.19.0

onChange
Function
false

Callback with options selected when selecting or removing an option (value: T[]) => void

since

10.19.0

onSearch
Function
false
since

10.19.0

optGroupRenderer
Function
false

Callback for rendering header for each entry in optgroups (group: GroupItem) => React.ReactNode

since

10.19.0

optionRenderer
Function
false

Callback for rendering each option (option: T, props: OptionRendererProps) => React.ReactNode

since

10.19.0

tokenRenderer
Function
false

Callback for rendering each selected value {'(props: TokenRendererProps) => React.ReactNode'}

since

10.19.0

Simple GroupSelect

For a simple GroupSelect, the default expected shape of each option is { id: number, label: string }.

With option groups

Pass groups of format { id: string, label: string } and give each option a respective groupId field.

Custom options data structure

If you have an array of custom object shapes, you can use getId, getLabel and getGroup to configure which fields each option is rendered with.

Custom onSearch callback

Configuring onSearch allows manipulate options list and provide a new filtering experience.