Select component allows user to pick one option from the given
use this component when you need to create custom value selection which is not possible with NativeSelect:
Bare minimum usage example:
Note that Select value should always be either string or null:
Select support two different data formats:
- An array of strings – use when you do not need to customize item component or display
- An array of objects with required
labelproperties and any other additional properties.
searchable prop to enable search in select and
nothingFound prop to provide label that will be shown when no options were found:
clearable prop to enable clearing select value.
When prop is true and value is selected clear button will replace chevron in right section:
To allow items deselection set
allowDeselect, user will also be able to deselect item if
clearable prop is set:
getCreateLabel props to enable creating new select item.
Note that you will need to handle data state to manage item creation correctly:
When dropdown height is exceeded dropdown becomes scrollable, to change max-height set
maxDropdownHeight prop with value in px:
You can change select item component and filtering logic that is used in search. To do so you will need to:
- Add extra props to
filterfunction which determines whether item should be added to the search results
itemComponentwhich will consume
By default, dropdown is placed below the input and when there is not enough space, it flips to be above the input.
To change this behavior, set
By default, dropdown animations are turned off to increase responsiveness. You can enable them by setting optional props:
transition– premade transition name or custom transition styles object, see Transition component for all available options
transitionDuration– transition duration in ms, defaults to 0
transitionTimingFunction– defaults to
By default, Select uses ScrollArea to render dropdown.
If you want to use native scrollbars instead, set
div as a dropdown component:
You can replace icon in right section with
Note that in this case
clearable option will not work and will need to handle it yourself:
aria-label in case you use component without label for screen reader support:
If you use
clearable option set