Text input with a dropdown menu of items, which are usually based on the current input value.

Typical use will involve listening for input events, fetching or otherwise computing menu items, then passing those menu items back to the Lookup for display.

TextInput props apply

This component contains a TextInput component. You can bind TextInput props to this component and they will be passed to the TextInput within.

Attributes passed to input

This component will pass any HTML attributes applied to it, except for CSS class, to the <input> element within the component.



The Lookup component will emit input events on input, which the parent component should react to by computing or fetching menu items, then providing those items to the Lookup component for display by updating the menu-items prop.

Items are displayed via the MenuItem component—see the MenuItem docs for more options. In this example, a menuConfig object is passed to the Lookup to bold the label text.

Note that in this example, menu items are Wikidata items with a human-readable label and a Wikidata entity ID value.


The parent component must update the menu-items prop after each input event, otherwise the Lookup component will stay in the pending state indefinitely. If there are no results for the given input, set the menu-items prop to an empty array ([]).

Selected value:

With custom menu item display

The menu-item slot can be used to set up custom menu item content and formatting.

With "no results" content

A non-interactive "no results" message can be displayed via the no-results slot. If populated, this slot will automatically display when there are zero menu items.

With fetched results

Often, a Lookup component is used to fetch results from an API endpoint. Parent components should react to the input event emitted by Lookup to search for results, then pass back to the Lookup either an array of results to display as menu items or an empty array if there are no results. Between those two events, a pending state animation will display in the input.

Clearable, with start icon

Props of the TextInput component can be bound to Lookup and will be passed down to the TextInput component inside of it, so you can take advantage of features like the "clear" button and icons.

With placeholder

Attributes (except for class) will fall through to the input element, so you can set things like placeholder on the Lookup component and they'll be applied to the input.



Prop nameDescriptionTypeDefault
selected(required)Value of the current selection.

Must be bound with v-model:selected.

The property should be initialized to null rather than using a falsy value.
menuItems(required)Menu items.MenuItemData[]
initialInputValueInitial value of the text input.string|number''
disabledWhether the entire component is disabled.booleanfalse
menuConfigConfiguration for various menu features. All properties default to false.

See the MenuConfig type.
MenuConfig() => { return {} as MenuConfig; }


Event namePropertiesDescription
update:selectedselected string | number | null - The new selected valueWhen the selected value changes.
inputvalue string | number - The new valueWhen the text input value changes.


menu-itemDisplay of an individual item in the menumenuItem MenuItemData - The current menu item
no-resultsMessage to show if there are no results to display.

Last updated: