Form

Input Autocomplete

Single-select autocomplete input driven by an options array.

Loading playground

Overview

InputAutocomplete is the data-driven, single-select autocomplete. Pass an options array of { value, label, disabled? } and the component handles filtering, keyboard navigation, and selection. Wrap it in <LField> to inherit id, disabled, required, invalid, and errorMessage from the surrounding form chrome.

For multi-select pickers and custom display formatters, use InputCombobox instead.

Key Business & UX Benefits

Typeahead filtering cuts the number of taps to pick a country, city, or category, which shortens checkout and signup flows on mobile.
Disabled-option support lets the picker show what exists but is currently unavailable, so customers self-serve answers like "ships to my country?" without contacting support.
Field integration keeps label, required, and error state in one place, so a misspelled country code surfaces inline rather than failing silently on submit.

Feature List

`options` accepts an array of `{ value, label, disabled? }`, keeping the data shape simple while supporting unavailable picks
Built-in typeahead filtering and keyboard navigation, so country and category pickers cut taps on mobile
Inherits `id`, `disabled`, `required`, `invalid`, and `errorMessage` from `<LField>` context, removing per-control ARIA wiring
Single-select v-model with the option's `value`, so consumers store a plain string or id instead of a custom object
Pair with `InputCombobox` when multi-select or custom display formatters are needed

API Reference

Prop	Default	Type
`options`required		`InputAutocompleteOption[] { value, label, location, 3 more }`
`modelValue`		`string`
`defaultValue`		`string`
`placeholder`		`string`
`disabled`	`false`	`boolean`
`required`	`false`	`boolean`
`invalid`	`false`	`boolean`
`id`		`string`
`emptyText`	`No results`	`string`
`icon`		`IconName ("actions/login-1" \| "actions/logout-1" \| 121 more)` Optional leading icon shown inside the input field.
`trailingIcon`		`IconName ("actions/login-1" \| "actions/logout-1" \| 121 more)` Optional non-interactive icon after the text (and after clear when visible), e.g. a map pin on desktop store finder — purely decorative / context; not a button.
`clearable`	`false`	`boolean` Shows a clear control when there is typed text (e.g. location search).
`suppressDropdown`	`false`	`boolean` When true, the suggestion dropdown is not rendered (e.g. desktop store finder with inline list filter).

Event	Type
`update:modelValue`	`(event: "update:modelValue", value: string): void`
`selectOption`	`(event: "selectOption", option: InputAutocompleteOption): void`

Edit this pageorReport an issue

Icon Button

Icon-only button atom with a required accessible label rendered as aria-label.

Input Checkbox

Labelled checkbox combining Checkbox and Label, with built-in required indicator.