Skip to Content

Select

Displays a list of options for the user to pick from—triggered by a button.

With label

Select
Select

Loading

Select

Custom display

Select

Scrollable

Fullscreen mode

Select

Component props

NameTypeDescription
valuestring | numberControlled selected value
defaultValuestring | numberDefault selected value
labelstringLabel text displayed above the select
placeholderstringPlaceholder text when no selection
isLoadingbooleanShows loading indicator
isDisabledbooleanDisables the select
isFullscreenbooleanOpens options in fullscreen mode
allowSearchbooleanEnables search within options
searchValuestringControlled search field value
searchDelaynumberDebounce delay for search
maxHeightstring | numberMax height of the dropdown list
showIconbooleanShow chevron icon on trigger button (default: true)
onChange(value: any) => voidCalled when selection changes
onSearch(value: string) => voidCalled when search value changes
renderValueReactNode | FunctionCustom render for selected value
buttonPropsButtonPropsProps passed to the trigger button
listPropsListPropsProps passed to the list component
popoverPropsPopoverPropsProps passed to the popover