Ui3nSelector

Selector component for choosing items from a dropdown list with search and customization options.

Props

Name	Type	Default	Description
id	string | undefined	—	Root element id
name	string | undefined	—	HTML name attribute for form submission
modelValue*	Ui3nSelectorValue<T>	—	Current selector value
label	string | undefined	""	Label text
placeholder	string | undefined	—	Placeholder text
items	T[] | undefined	[] as T[]	Items to display
itemValue	keyof T | undefined	"id"	Property to use as value
itemDisplay	keyof T | Ui3nSelectorItemDisplayingFunction<T> | undefined	—	Property or function to display item
returnObject	boolean | undefined	false	Whether to return the whole object or just the value
clearable	boolean | undefined	false	Whether to show clear button
hideSelected	boolean | undefined	—	Whether to hide selected item
noDataText	string | undefined	""	Text to show when no data
disabled	boolean | undefined	—	Whether selector is disabled

Slots

Slot Name	Scope Props (v-slot)	Description
#noDataText	—	No data text slot
#item	{ item: T; index: number; activeIndex: Nullable<number>; }	Item slot
#selection	{ value: Ui3nSelectorValue<T>; selectedItem: T | undefined; }	Selection slot

Usage Examples

Country Selection (Flat Value Mode)

Demonstrates the standard single dropdown selection where the component tracks and returns a primitive identifier (id) string.

Country Selection

Standard selector with flat string items and primitive model tracking

Fruit Selection (Clearable Mode)

Demonstrates a dropdown list with fruit options where the component returns the complete entity object and provides an integrated close button to quickly reset the selected value.

Fruit Selection

Clearable selector returning the full data object with an integrated quick-reset button

Custom Layout (Item & Selection Slots)

Demonstrates utilizing template slots to override both the dropdown menu rows and the field trigger displaying view with customized avatar elements.

Custom Item & Selection Layout

Selector component overriding default rows and placeholder text with complex markup slots