Interface of Select
🏗 Coming Soon

The <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.


The isFilterable option allows the user to type in the input, triggering the onFilter callback, 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.


When isFilterable is true, use the showCreate prop along with the formatCreateLabel (defaults to 'Create "${input value}"') to allow the user to enter a value not found in the options.

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 label.


Options can have a description property.

Disabled Property

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 isClearable prop.


Indicates that options are currently being loaded.

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 windowedOptions 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 windowedOptions={false} after options={options1k} below:

List Layout

Use the listLayout prop to control layout properties of the list, like width and height, separately from the input.


Use the autoResize prop to allow the width of the component to adjust to the current value or placeholder, which is useful when the 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 width: auto.


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.


Define an icon for each option that will display in the list to the left of the option label as well as in the input when the option is selected. Use icons from our list or custom JSX.


Right aligned content in the option.