Select
Base UI-powered Select component.
import { Select } from '@lobehub/ui/base-ui';Data Entry
Default
Loading preview
Clear Value Contract
Loading preview
ReactNode Label Search
Loading preview
Tags with Closed Popup
Loading preview
Atom Components
Loading preview
Custom Render
Loading preview
Selected Indicator Variant
Loading preview
Virtual List
Loading preview
APIs
Select
Select properties
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.listItemHeightnumberloadingbooleanmode'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'large' | 'middle' | 'small'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'borderless' | 'filled' | 'outlined'virtualboolean
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 |
Helpful?