Select
Dropdown selection component with search and multi select.
Basic
Simple select component
Contained Variant
Contained input style
Multi Select
Select multiple options
Main Props
| Name | Type | Default | Description |
|---|---|---|---|
color | Color | 'blue' | Color variant |
variantInput | 'floating' | 'contained' | 'floating' | Input style |
shape | 'rounded' | 'square' | 'rounded' | Shape for contained variant |
size | 'xs' | 'sm' | 'md' | 'lg' | 'md' | Component size |
label | string | '' | Label text |
positionLabel | 'top' | 'left' | 'top' | Label position |
placeholder | string | 'Select' | Placeholder text |
loading | boolean | false | Loading state |
disabled | boolean | false | Disable component |
disabledAutoFocus | boolean | false | Disable auto focus |
disabledFocusInput | boolean | false | Disable focusing input |
disabledSearch | boolean | false | Disable search |
disabledClose | boolean | false | Prevent closing |
textNoOptions | string | 'No Options' | Text when no options |
options required | SelectOption[] | - | Available options |
value | SelectOption | SelectOption[] | - | Current value |
onChange required | (value: SelectOption | SelectOption[]) => void | - | Change handler |
slots | SlotsProps | - | Slot props |
children | React.ReactNode | - | Custom children |
onBlur | (e: React.FocusEvent<HTMLDivElement>) => void | - | Blur handler |
loadingMore | boolean | false | Loading more state |
Root Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameRoot | string | '' | Class for root |
classNameRootSelect | string | '' | Class for select root |
Box Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameWrapperBox | string | '' | Class for box wrapper |
classNameBox | string | '' | Class for box |
Label Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameLabel | string | '' | Class for label |
Search Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameSearch | string | '' | Class for search input |
Select Props
| Name | Type | Default | Description |
|---|---|---|---|
classNameSelectLoading | string | '' | Class for loading icon |
classNameSelectChevron | string | '' | Class for chevron icon |
classNameSelectClose | string | '' | Class for close icon |
renderLoading | React.ReactNode | - | Custom loading |
renderChevron | React.ReactNode | - | Custom chevron |
renderClose | React.ReactNode | - | Custom close |
Option Props
| Name | Type | Default | Description |
|---|---|---|---|
maxHeight | number | 300 | Max height of options |
classNameWrapperOptions | string | '' | Class for options wrapper |
classNameOptions | string | '' | Class for options |
classNameNoOptions | string | '' | Class for no options |
classNameOption | string | '' | Class for option |
classNameOptionLabel | string | '' | Class for option label |
classNameOptionHover | string | '' | Class when option hover |
classNameOptionActive | string | '' | Class when option active |
classNameWrapperOptionLoading | string | '' | Class for option loading wrapper |
classNameOptionLoading | string | '' | Class for option loading |
classNameOptionLoadingText | string | '' | Class for option loading text |
renderMenuOption | (option: SelectMenuOption) => React.ReactNode | - | Custom option renderer |
Multi Props
| Name | Type | Default | Description |
|---|---|---|---|
isMulti | boolean | false | Enable multi select |
classNameRootMulti | string | '' | Class for multi root |
classNameWrapperMultiBadge | string | '' | Class for badge wrapper |
classNameMultiBadge | string | '' | Class for badge |
classNameMultiBadgeLabel | string | '' | Class for badge label |
classNameMultiBadgeClose | string | '' | Class for badge close |
hidePlaceholderWhenSelected | boolean | false | Hide placeholder on selection |
renderBadge | (option: SelectOption, index: number) => React.ReactNode | - | Custom badge renderer |
Load More Props
| Name | Type | Default | Description |
|---|---|---|---|
offset | number | 300 | Scroll offset for fetch more |
fetchMore | () => any | - | Callback to load more |
Group Props
| Name | Type | Default | Description |
|---|---|---|---|
showGroup | boolean | false | Enable option grouping |
groupBy | SelectGroupBy | - | Group by function |
groupSortKey | SelectSortKey | 'group_id' | Group sort key |
groupSortBy | 'asc' | 'desc' | 'asc' | Group sort order |
optionSortKey | SelectSortKey | 'value' | Option sort key |
optionSortBy | 'asc' | 'desc' | 'asc' | Option sort order |
classNameWrapperGroup | string | '' | Class for group wrapper |
classNameGroupLabel | string | '' | Class for group label |