Theme:
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 |
CSS Variables
Set any of these where you need it — on :root, on a container, or on the element itself through [data-ui3n] — and the component follows. Leave them alone and it uses the defaults below.
| Name | Default |
|---|---|
--ui3n-selector-activator-height | 32px |
--ui3n-selector-body-border-radius | 8px |
--ui3n-selector-body-padding | 4px |
--ui3n-selector-border-radius | calc(var(--_selector-activator-height) / 2.5) |
--ui3n-selector-font-size | 12px |
--ui3n-selector-item-border-radius | 4px |
--ui3n-selector-item-font-size | 13px |
--ui3n-selector-item-min-height | 32px |
--ui3n-selector-item-padding | 4px |
--ui3n-selector-trigger-font-size | 13px |
--ui3n-selector-trigger-padding | 0 24px 0 8px |
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