Select
Base UI-powered Select component.
import { Select } from '@lobehub/ui/base-ui';Default
Clear Value Contract
ReactNode Label Search
Tags with Closed Popup
Atom Components
Custom Render
Selected Indicator Variant
Virtual List
Viewport Bounds
The popup is clamped to the space base-ui reports as available, so the search field never leaves the viewport. setFloatingCollisionPadding reserves extra space on any side for every base-ui floating layer; here it keeps the popup below a fixed title bar.
APIs
Select
allowClearbooleanautoFocusbooleanbehaviorVariant'default' | 'item-aligned'Behavior variant for Base UI Select. - `default`: regular dropdown positioning (alignItemWithTrigger=false, modal=false) - `item-aligned`: aligns the selected item with trigger and uses modal=true
Defaults to
"default".classNamestringclassNamesSelectClassNamesdefaultOpenbooleandefaultValueanydisabledbooleanidstringlabelRender(option: SelectOption<any>) => ReactNodelistHeightnumber设置弹窗滚动高度
Defaults to
512.listItemHeightVirtualListPropsnumberRow height hint for the virtualizer; rows are still measured after mount.
loadingbooleanmode'multiple' | 'tags'namestringonChange(value: any, option?: SelectOption<any> | SelectOption<any>[] | undefined) => voidonOpenChange(open: boolean, eventDetails?: SelectRootChangeEventDetails) => voidonSelect(value: any, option?: SelectOption<any> | undefined) => voidopenbooleanoptionRender(option: SelectOption<any>, info: { index: number; }) => ReactNodeoptionsSelectOptions<any>placeholdernull | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>popupClassNamestringpopupMatchSelectWidthnumber | false | trueprefixnull | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | LucideIcon | FC<any>readOnlybooleanrequiredbooleanselectedIndicatorVariant'bold' | 'check'Variant for how selected items are indicated in the popup. - `check`: Display a checkmark icon next to selected items (default) - `bold`: Display selected items with bold text, no checkmark
Defaults to
"check".shadowbooleanshowSearchbooleansize'small' | 'middle' | 'large'Defaults to
"middle".styleCSSPropertiessuffixIconnull | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | LucideIcon | FC<any>suffixIconPropsOmit<IconProps, 'icon'>tokenSeparatorsstring[]valueanyvariant'outlined' | 'borderless' | 'filled'virtualVirtualListPropsbooleanOnly mount the rows near the scroll position. Use for long flat lists (hundreds of rows); groups and submenus keep working but are kept mounted as one row.
Defaults to
false.
SelectOption
| Property | Description | Type | Default |
|---|---|---|---|
| className | The className of option | string | - |
| disabled | Whether disabled | boolean | - |
| label | Display text of option | ReactNode | - |
| style | CSS style of option | CSSProperties | - |
| title | Title attribute for option | string | - |
| value | Value of option | Value | - |
SelectOptionGroup
| Property | Description | Type | Default |
|---|---|---|---|
| disabled | Whether disabled | boolean | - |
| label | Display text of group | ReactNode | - |
| options | Options in this group | SelectOption[] | - |
SelectClassNames
| Property | Description |
|---|---|
| clear | Clear button |
| dropdown | Dropdown container (alias for popup) |
| empty | Empty state |
| group | Option group |
| groupLabel | Group label |
| icon | Suffix icon |
| item | Option item |
| itemIndicator | Selected indicator |
| itemText | Option text |
| list | Options list |
| option | Option item (alias for item) |
| popup | Popup container |
| prefix | Prefix element |
| root | Root container (alias for trigger) |
| search | Search input container |
| suffix | Suffix container |
| trigger | Trigger element |
| value | Value display |