Form
Input Autocomplete
Single-select autocomplete input driven by an options array.
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.
Usage
InputAutocomplete Default
<Field label="Country" :error-message="error">
<InputAutocomplete v-model="value" :options="countries" />
</Field>
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 |
|---|---|---|
optionsrequired | InputAutocompleteOption[] { value, label, disabled } | |
modelValue | string | |
defaultValue | string | |
placeholder | string | |
disabled | false | boolean |
required | false | boolean |
invalid | false | boolean |
id | string | |
emptyText | string |
| Event | Type |
|---|---|
update:modelValue | (event: "update:modelValue", value: string): void |