Select

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.

Filtering

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.

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.

Groups

Options can be organized into groups, with an optional label.

Descriptions

Options can have a description property.

Disabled Property

Use the disable property to make an input field uneditable.

Placeholder

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.

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:

Windowing

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.

autoResize

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.

Indicator

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.