Select
Displays a list of options for the user to pick from—triggered by a button.
Selected item alignment
By default, the menu opens below the trigger like a dropdown. Set alignItemWithTrigger to align
the selected option with the trigger value instead.
With label
With search
Loading
Custom display
Scrollable
Fullscreen mode
Component props
| Name | Type | Description |
|---|---|---|
| value | string | number | Controlled selected value |
| defaultValue | string | number | Default selected value |
| label | string | Label text displayed above the select |
| placeholder | string | Placeholder text when no selection |
| isLoading | boolean | Shows loading indicator |
| isDisabled | boolean | Disables the select |
| isFullscreen | boolean | Opens options in fullscreen mode |
| allowSearch | boolean | Enables search within options |
| searchValue | string | Controlled search field value |
| searchDelay | number | Debounce delay for search |
| maxHeight | string | number | Max height of the dropdown list |
| showIcon | boolean | Show chevron icon on trigger button (default: true) |
| alignItemWithTrigger | boolean | Aligns the selected option with the trigger instead of opening below it (default: false) |
| onChange | (value: any) => void | Called when selection changes |
| onSearch | (value: string) => void | Called when search value changes |
| renderValue | ReactNode | Function | Custom render for selected value |
| buttonProps | ButtonProps | Props passed to the trigger button |
| listProps | ListProps | Props passed to the list component |
| popoverProps | PopoverProps | Props passed to the popover |