e8-form-lookup
Updated on Sep 18, 2025 27 minutes to readA lookup input component with dynamic suggestion popper, optional creation of new entries, and integrated form support.
Overview
e8-form-lookup allows users to search, select, and optionally create items from a data source.
It supports popper-based suggestions, lazy search, keyboard navigation, and customizable append/prepend slots.
<e8-form-lookup
v-model="vars.item"
label="Item"
placeholder="Select an item"
tooltip="You can search or create a new item"
:size="'lg'"
:limit="100"
:horizontal-alignment="'left'"
:popup-width="'300px'"
:popup-padding="'0.5rem'"
source="lstExample"
></e8-form-lookup>
🔽 Show more
Properties
| Property | Description | Type | Default |
|---|---|---|---|
| addition-disabled | Disables the ability to create new entries. | boolean | false |
| data-columns | Columns to fetch from the data source. | array | [] |
| edit-mode | Size mode for the form when creating a new entry. | string | 'lg' |
| filling-values | Default values for newly created entries. | object | {} |
| filters | Additional filter parameters for the data query. | any | — |
| form | Form identifier for creating a new entry. | string | — |
| horizontal-alignment | Text alignment inside the input. | E8TextHorizontalAlignment | — |
| label | Label for the input field; set to false to hide label. | string | boolean | — |
| limit | Maximum number of options fetched from the source. | number | 250 |
| placeholder | Placeholder text for the input field. | string | — |
| popup-padding | Padding for the popper suggestion container. | string | '0.5rem' |
| popup-width | Width of the popper suggestion container. | string | number | '250px' |
| readonly | Makes the input non-editable. | boolean | false |
| search-data-columns | Columns used for search filtering. | array | — |
| size | Size of the control. | E8ElementSizes | 'default' |
| sort | Sorting criteria for options. | object | string | {} |
| source | Data source for lookup. | E8ScriptAlias | — |
| tooltip | Tooltip text displayed below the input. | string | — |
| v-model | Two-way bound input value. | string | number | — |
| visible | Controls component visibility. | boolean | true |
Slots
| Slot | Description |
|---|---|
| append | Custom slot rendered in the input group append section. |
| label | Custom label slot. Provides { label, value } as slot props. |
| option | Scoped slot for customizing popper suggestion items. |
| prepend | Custom slot rendered in the input group prepend section. |
Events
| Event | Description |
|---|---|
| on-blur | Called when the input loses focus. |
| on-change | Called whenever the input value changes. |
| on-focus | Called when the input gains focus. |
| on-show-popup | Called when the popper for the selected value is shown. |