Usage

Props

NameTypeRequiredDefaultDescription
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

label
ReactNode
false
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
optionsRef
RefObject<HTMLDivElement>
false
since

10.19.0

placeholder
string
false

Renders when the label is blank

since

10.19.0

placementfalse

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

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

To get started, an array of data will be mapped over as Selects children. Each item in the array will be used with a Select.Option. Select.Option has two important props to create a functioning component. The first prop is value, which will be provided back in Selects onSelect prop (more on this later). The second important prop is selected, a boolean if this option is the currently selected item.

Selects prop onSelect function signature looks a bit like this ({ event, item }) => void. A single argument that contains an object with keys event and item. item is the value prop from Select.Option and event is from the click event firing.

The basic Select must have a label to represent a value. If Select does not have an onClear, the value can never be emptied.

onClear

Implementing onClear means the Selects value can be deleted, or empty. It will render an x icon with the provided onClear as an onClick. Since the label can be missing, a clearable select should have a placeholder.

onSearch

Having a searchable select requires another prop, an onSearch function to give you the search term. It's up to the implementor to filter the array of items with the search term.

The current implementation of search fires the onSearch function with each keypress.

Translating the Search placeholder

You can customize the Search placeholder by providing translations to I18nProvider and configuring the Select's i18nScope prop

See the I18n documentation for more on Core's approach to translations

Grouping

Component Select.OptGroup as siblings to Select.Option. Currently, Select supports Select.Option Select.OptGroup children.

To add a footer, pass content to the footer prop. This will wrap your nodes with a Menu.Footer.

suggested

Similar to a selected option, a suggested option scrolls into view and starts list navigation from this option. If an option is currently selected, the suggestion will be ignored.

Advanced

Lazy loading items with onScrollBottom

By using onScrollBottom, you are able to determine when the user has scrolled to the bottom of the list. This enables features such as on-demand/lazy loading, where you can fetch more items to populate your select list.

Callbacks

You can use the beforeShow, afterShow, beforeHide, and afterHide props to hook into different stages of displaying the Select. For instance, if you want to make a fetch when a user opens a Select, but don't want to display an empty menu while the data is loading, you can use beforeShow to control when the Select opens.

Select.Option

NameTypeRequiredDefaultDescription
disabled
boolean
false
since

10.19.0

index
number
false
since

10.19.0

selected
boolean
false

Represents the currently selected value. This option will be styled differently as well as receive UX to scroll into view and start list navigation from this element.

since

10.19.0

suggested
boolean
false

If nothing is selected, suggest this option. Suggested options mimic the UX of a selected option, scroll into view and start list navigation from this element.

since

10.19.0

value
any
true
since

10.19.0

Select.OptGroup

NameTypeRequiredDefaultDescription
children
ReactNode
false
className
string
false

Additional classNames

style
CSSProperties
false

Additional CSS styles