Form Inputs
Select
Displays a list of options for the user to pick from—triggered by a button.
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 (disabled is also accepted) |
| size | 'sm' | 'md' | Trigger size. Emits data-size on the trigger (default: md) |
| 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. When set, the list is wrapped in a ScrollArea; otherwise the popup scrolls itself and shows scroll arrows |
| 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 |
| onValueChange | (value, details) => void | Base UI change handler, called before onChange |
| onSearch | (value: string) => void | Called when search value changes |
| renderValue | ReactNode | Function | Custom render for selected value |
| triggerProps | Select.Trigger.Props | Props passed to the trigger element (buttonProps is a deprecated alias) |
| listProps | ListProps | Props passed to the list component |
| popoverProps | PopoverProps | Props passed to the popover |
Anatomy#
The rendered parts expose data-slot attributes for styling: select, select-trigger,
select-value, select-icon, select-positioner, select-content, select-empty,
select-scroll-up-button, select-scroll-down-button, and list / list-item from List.
The selected label is resolved by Base UI from the items collection—when items is not supplied
it is derived from the <ListItem> children automatically.