Select API
This page provides an overview of the Select component API, detailing its props, emits, slots, and exposed methods/states.
Props
The Select component accepts the following props:
| Prop | Default | Type | Description |
|---|---|---|---|
dataSelect | [] | Array<BaseDataItem> | The data items available for selection. |
autoFocus | false | boolean | Automatically focuses the select input on mount. |
keySelect | "id" | string or "id" | The key used to uniquely identify each item in the data set. |
valueSelect | "value" | string or "value" | The key used to retrieve the display value of each item. |
multiple | false | boolean | Enables multiple item selection. |
maxVisible | undefined | number | The maximum number of items visible in the dropdown list. |
closeButtonBadge | false | BadgeProps["closeButton"] | Enables a close button for badges in multiple selection mode. |
noData | "No data available" | string | Text displayed when there are no items in the list. |
noQuery | false | boolean | Disables the query-based filtering of items. |
classSelect | "justify-end" | StyleClass or "justify-end" | Custom CSS class for the select container. |
classSelectList | "" | StyleClass | Custom CSS class for the dropdown list container. |
classMaskQuery | "font-bold text-theme-700 dark:text-theme-300" | string | Custom CSS class for the query text mask. |
paramsFixWindow | {} | Omit<FixWindowProps, "modelValue"> | Configuration for the dropdown's positioning behavior. |
id | undefined | string | Unique identifier for the select component. |
modelValue | undefined | number or string or NonNullable<unknown> or null or Array<number or string or null> | The current value of the select field. |
Emits
The Select component emits the following events:
| Emit | Payload | Description |
|---|---|---|
update:isInvalid | SelectProps["isInvalid"] | Emitted when the invalid state is updated. |
update:modelValue | SelectProps["modelValue"] or null, Array<any> or undefined | Emitted when the selected value is updated. |
change:modelValue | SelectProps["modelValue"] or null, Array<any> or undefined | Emitted when the selected value changes. |
isActive | boolean | Emitted when the select component becomes active or inactive. |
Slots
The Select component provides the following slots:
| Slot | Payload | Description |
|---|---|---|
default | VNode[] | Default slot for custom content inside the select component. |
values | VNode[] | Slot for custom content for the selected values. |
item | VNode[] | Slot for custom content for each item in the dropdown list. |
before | VNode[] | Slot for content to be displayed before the select field. |
after | VNode[] | Slot for content to be displayed after the select field. |
Expose
The Select component exposes the following methods and states via ref:
| Expose | Value | Description |
|---|---|---|
layout | InputLayoutExpose or undefined | Reference to the input layout component. |
selectListWindow | FixWindowExpose or undefined | Reference to the dropdown list's window. |
selectBody | HTMLElement or undefined | Reference to the select container element. |
selectList | HTMLElement or undefined | Reference to the dropdown list container element. |
selectSearch | HTMLElement or undefined | Reference to the search input element within the dropdown. |
selectItems | HTMLElement or undefined | Reference to the list of selectable items. |
activeItem | number | The index of the currently active item. |
query | string | The current query string used for filtering items. |
isOpenList | boolean | Indicates whether the dropdown list is open. |
classLayout | SelectProps["class"] | Custom CSS class for the layout. |
value | SelectProps["modelValue"] | The current value of the select field. |
visibleValue | Array<any> | The visible value(s) of the select component. |
valueKeys | Array<any> | The keys of the selected values. |
keySelect | SelectProps["keySelect"] or null | The key used to uniquely identify items. |
valueSelect | SelectProps["valueSelect"] or null | The key used to retrieve item display values. |
dataSelect | SelectProps["dataSelect"] | The list of available items. |
autoFocus | NonNullable<SelectProps["autoFocus"]> | Indicates whether autofocus is enabled. |
mode | NonNullable<SelectProps["mode"]> | Indicates the current styling mode. |
isDisabled | NonNullable<SelectProps["disabled"]> | Indicates whether the select is disabled. |
isLoading | NonNullable<SelectProps["loading"]> | Indicates whether the select is in a loading state. |
isInvalid | NonNullable<SelectProps["isInvalid"]> | Indicates whether the select is invalid. |
messageInvalid | SelectProps["messageInvalid"] | The validation message for the select component. |
isValue | boolean | Indicates whether the select has a value. |
isMultiple | NonNullable<SelectProps["multiple"]> | Indicates whether multiple selection is enabled. |
maxVisible | SelectProps["maxVisible"] or undefined | The maximum number of items visible in the dropdown list. |
noData | NonNullable<SelectProps["noData"]> | The text displayed when no items are available. |
isQuery | NonNullable<SelectProps["noQuery"]> | Indicates whether query-based filtering is disabled. |
classMaskQuery | NonNullable<SelectProps["classMaskQuery"]> | Custom CSS class for the query text mask. |
dataList | Array<any> | The processed list of data items for rendering. |
paramsFixWindow | NonNullable<SelectProps["paramsFixWindow"]> | Configuration for the dropdown's positioning behavior. |
classBase | SelectProps["classSelect"] | Custom CSS class for the select base container. |
classSelectList | SelectProps["classSelectList"] | Custom CSS class for the dropdown list container. |
Methods:
focusSelect(isFocus: boolean): void- Sets the focus state of the select component.openSelect(): void- Opens the dropdown list.closeSelect(event: MouseEvent): void- Closes the dropdown list.select(selectValue: BaseDataItemornull): void- Selects a specific item or clears the selection.