selectmenu

type
Not required
("select" | "autocomplete")
"select"
className
Not required
string
label
Not required
string
aria-label
Not required
string
aria-labelledby
Not required
string
name
Not required
string
error
Not required
bool
onChange
Not required
func
options
Required
arrayOf/func
When using async, the options should be a function
value
Not required
string/number/shape
The value prop only allows object for the async autocomplete use-case of prefilling a value+label before request
placeholder
Not required
string
async
Not required
bool
Setting the async prop will change the type to 'autocomplete'
create
Not required
bool/string
With type="autocomplete", this allows to add search input. When a string, it overrides default prefix
disabled
Not required
bool

Using the composable Select API:

With selected option

With a disabled option

With a label

With aria-label

With external label

Without caret icon

A wide select

Clearing the selected value of a select menu

onChange event

The Select and SelectMenu API provide an event object (emulating browser event API) of the changed option within the OnChange callback. It's shape is:

"{ target: { value: string, label: string, name: string } }"

The name simply reflects the name prop passed to the SelectMenu/Select component.

Here's an example usage:

Autocomplete

With a predefined value

Unlike the legacy AutoCompleteMenu, this keeps the convention of taking a value string in the value prop over an object

With option to create new items

Async autocomplete

By passing the async prop, the SelectMenu component will use the autocomplete type and fetch options asynchronously. Here's an example to search for repositories on GitHub:

Note


GitHub's API rate-limits queries to it so the async example below may stop working after a few tries.

Customizing the dropdown options with a custom component

Disabled state

Without caret icon