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. | |
label | ReactNode | false | ||
loading | boolean | false | If the select is loading | |
onScrollBottom | ((e: UIEvent<HTMLDivElement, UIEvent>) => void) | false | ||
onSelect | false | |||
optionsRef | RefObject<HTMLDivElement> | false | ||
placeholder | string | false | Renders when the label is blank | |
placement | false | The placement of the overlay | ||
qa | Partial<QaTags> | false | ||
showDelay | number | false | ||
tabIndex | number | false | Configurable tabIndex for the select button | |
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. |
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.
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.
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.
You can customize the Search placeholder by providing translations to I18nProvider and configuring the Select's i18nScope prop
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.
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.
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.
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.
Name | Type | Required | Default | Description |
---|---|---|---|---|
disabled | boolean | false | ||
index | number | false | ||
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. | |
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. | |
value | any | true |
Name | Type | Required | Default | Description |
---|---|---|---|---|
children | ReactNode | false | ||
className | string | false | Additional classNames | |
style | CSSProperties | false | Additional CSS styles |
10.19.0