<Select /> component renders a single menu on the page, with no accompanying label. It is generally used to construct higher-order components like the
<FieldText />. If you are building a form, you probably want to use
<FieldSelect /> instead as it provides label and validation support.
isFilterable option allows the user to type in the input, triggering the
which should be used to narrow the options passed to the
Select. Use the
isClearable prop to allow
the user to delete the current value.
Name and ID
A name and ID can be specified in the
<Select /> component. Names are important if the input is used in the context of a form, in which case a name is required for the value of the input to be captured.
Options can be organized into groups, with an optional
Options can have a
Use the disable property to make an input field uneditable.
Placeholders are used to give a hint to the user of the expected value for the input.
To allow the user to clear the
Select's value, add the
scrollIntoView for improved UX on a long list of options
If you're rendering a long list which scrolls beyond the max-height of the list, you can leverage the
scrollIntoView option property to focus the list to a helpful scroll position. Using
scrollIntoView will also highlight the option, so that keyboard navigation will start from there as well.
When you open the following list,
Mascarpone will be highlighted and visible at the bottom of the menu:
Another feature for long lists. Because rendering hundreds of options results in poor performance,
if there are 100 or more options, the option list will be "windowed", (a.k.a. "virtualized") and only the
options visibile in the scroll area will be rendered, plus a buffer of 5 above and below. The
prop can be used to override this – either by setting it to
true for under 100 or
false for over 100.
To observe the performance impact, add
listLayout prop to control layout properties of the list,
like width and height, separately from the input.
autoResize prop to allow the width of the component to adjust to the current value or placeholder, which is useful
Select is meant to be rendered inline and horizontal space is at a premium.
The container will default to
display: inline-flex and both the container and list will default to
The default indicator renders a checkmark for the selected option and a spacer for the unselected options.
To customize this, use
indicator property (either at the component or option level), which accepts a React node (including
false to remove it
completely) or a function accepting
OptionIndicatorProps and returning a React node.