Custom searchable select
Select is an opinionated component built on top of the Combobox component. It has a limited set of features to cover only basic use cases. If you need more advanced features, you can build your own component with Combobox . You can find examples of custom select components on the examples page .
Select allows capturing user input based on suggestions from a list. Unlike Autocomplete , Select does not allow entering custom values.
Set loading prop to display a loading indicator. By default, the loader is displayed on the right side of the input. This is useful for async operations like API calls, searches, or validations:
The Select value must be a primitive type (string, number, or boolean). The onChange function is called with a primitive value as a single argument.
onChange is called with two arguments:
If you prefer the object format in state, use the second argument of the onChange handler:
Set the autoSelectOnBlur prop to automatically select the highlighted option when the input loses focus. Note: This prop only has an effect when searchable is set to true . To see this feature in action: select an option with the up/down arrows, then click outside the input:
Set the clearable prop to display the clear button in the right section. The button is not displayed when:
The clearSectionMode prop determines how the clear button and rightSection are rendered:
The allowDeselect prop determines whether the value should be deselected when the user clicks on the selected option. By default, allowDeselect is true :
This is default behavior, click 'React' in the dropdown
Set the openOnFocus prop to open the dropdown when the input receives focus. Note: This prop only has an effect when searchable is set to true :
Set the searchable prop to allow filtering options by user input:
You can control the search value with searchValue and onSearchChange props:
Set the nothingFoundMessage prop to display a given message when no options match the search query or there is no data available. If the nothingFoundMessage prop is not set, the Select dropdown will be hidden.
Set checkIconPosition prop to left or right to control position of check icon in active option. To remove the check icon, set withCheckIcon={false} . To align unchecked labels with the checked one, set withAlignedLabels prop.
Select supports primitive values (strings, numbers, booleans) as value type. Select automatically infers the value type. If you want to set the value type explicitly, pass type argument:
Select data prop accepts data in one of the following formats:
Array of primitive values (strings, numbers, booleans) :
Array of objects with value , label and optional disabled keys:
Array of groups with primitive value (string, number, boolean) options:
Array of groups with object options:
Example of a custom filter function that matches options by words instead of letter sequence:
By default, options are sorted by their position in the data array. You can change this behavior with the filter function:
You can implement fuzzy search using the fuse.js library to match options even with typos or partial matches:
The best strategy for large data sets is to limit the number of options that are rendered at the same time. You can do this with the limit prop. Note that if you use a custom filter function, you need to implement your own logic to limit the number of options in filter .
Example of Select with 100,000 options, 5 options are rendered at the same time:
The renderOption callback allows you to customize option rendering. It is called with an option object and checked state. The function must return a React node.
By default, the options list is wrapped with ScrollArea.Autosize . You can control the dropdown max-height with the maxDropdownHeight prop if you do not change the default settings.
If you want to use native scrollbars, set withScrollArea={false} . Note that in this case, you will need to change the dropdown styles with Styles API .
Set floatingHeight="viewport" to make the dropdown grow to fill the available vertical space in the viewport. The flip middleware is disabled in this mode – the dropdown always opens in the configured direction and is constrained to the viewport edges instead of flipping to the other side. Useful when working with large option lists:
The group property accepts any React node, so you can render custom markup (icons, badges, styled text) as a group label instead of a plain string. This also applies to MultiSelect , Autocomplete and TagsInput . Note that NativeSelect renders native optgroup elements and only supports string group labels.
When an option is disabled, it cannot be selected and is ignored in keyboard navigation.
You can override Combobox props with comboboxProps . This is useful when you need to change some of the props that are not exposed by Select , for example withinPortal :
To use Select inside popover, you need to set withinPortal: false :
You can control the dropdown opened state with the dropdownOpened prop. Additionally, you can use onDropdownClose and onDropdownOpen to listen to dropdown opened state changes.
By default, the dropdown is displayed below the input if there is enough space; otherwise it is displayed above the input. You can change this behavior by setting the position and middlewares props, which are passed down to the underlying Popover component.
Example of a dropdown that is always displayed above the input:
To change the dropdown width, set the width prop in comboboxProps . By default, the dropdown width is equal to the input width.
To change the dropdown offset, set the offset prop in comboboxProps :
If you experience horizontal infinite scrolling in the dropdown, set the shift middleware padding to 0 :
By default, dropdown animations are disabled. To enable them, you can set transitionProps , which will be passed down to the underlying Transition component.
Select supports leftSection and rightSection props. These sections are rendered with absolute positioning inside the input wrapper. You can use them to display icons, input controls, or any other elements.
You can use the following props to control sections styles and content:
Select component supports Input and Input.Wrapper component features and all input element props. The Select documentation does not include all features supported by the component – see the Input documentation to learn about all available features.
Set readOnly to make the input read only. When readOnly is set, Select will not show suggestions and will not call the onChange function.
Set disabled to disable the input. When disabled is set, the user cannot interact with the input and Select will not show suggestions.
Select supports the Styles API ; you can add styles to any inner element of the component with the classNames prop. Follow the Styles API documentation to learn more.
Component Styles API
Hover over selectors to highlight corresponding elements
If Select is used without the label prop, it will not be announced properly by screen readers:
Set aria-label to make the input accessible. In this case the label will not be visible, but screen readers will announce it:
If the label prop is set, the input will be accessible and it is not required to set aria-label :
To set aria-label on the clear button, use clearButtonProps . Note that this is required only when clearable is set.