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
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 (
With custom menu item display
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.
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.
|Value of the current selection.|
Must be bound with
The property should be initialized to
|Initial value of the text input.|
|Whether the entire component is disabled.|
|Configuration for various menu features. All properties default to false.|
See the MenuConfig type.
|selected ||When the selected value changes.|
|value ||When the text input value changes.|
|menu-item||Display of an individual item in the menu|
|no-results||Message to show if there are no results to display.|