autocomplete

Autocomplete

An input with suggestions that accepts free-form text; the value is the text itself.

States: Default, Focus, Disabled, Invalid

Parts

Part	File	Does
Autocomplete	Autocomplete.vue	Groups all parts of the autocomplete, which lets the user type freely and pick from suggestions.
AutocompleteAnchor	AutocompleteAnchor.vue	Frames the input and its buttons as one field, and marks where the suggestion list attaches.
AutocompleteCancel	AutocompleteCancel.vue	Clears the text the user has typed.
AutocompleteEmpty	AutocompleteEmpty.vue	Shows a message when no suggestion matches the text.
AutocompleteGroup	AutocompleteGroup.vue	Groups related suggestions under an optional heading.
AutocompleteInput	AutocompleteInput.vue	Takes the text the user types; the suggestions filter as it changes.
AutocompleteItem	AutocompleteItem.vue	Holds one suggestion; picking it fills the input with its text.
AutocompleteList	AutocompleteList.vue	Holds the suggestions while the autocomplete is open.
AutocompleteSeparator	AutocompleteSeparator.vue	Separates groups of suggestions in the list.
AutocompleteTrigger	AutocompleteTrigger.vue	Opens and closes the suggestion list.
AutocompleteViewport	AutocompleteViewport.vue	Scrolls the suggestions when the list is longer than the space available.

Anatomy

<Autocomplete>
  <AutocompleteAnchor>
    <AutocompleteInput />
    <AutocompleteCancel />
  </AutocompleteAnchor>
  <AutocompleteList>
    <AutocompleteViewport>
      <AutocompleteEmpty />
      <AutocompleteItem />
    </AutocompleteViewport>
  </AutocompleteList>
</Autocomplete>

Styling

Part	Recipe
AutocompleteEmpty	autocomplete-empty
AutocompleteGroup	autocomplete-label
AutocompleteInput	autocomplete-input
AutocompleteItem	autocomplete-item
AutocompleteList	autocomplete-content
AutocompleteSeparator	autocomplete-separator
AutocompleteViewport	autocomplete-viewport

Install

Writes 12 files into components/ui/autocomplete/. For agents, npx @frontic/ui docs autocomplete prints this reference as markdown; the MCP server serves the same.

Installs with it: input-group
npm packages: @lucide/vue; @vueuse/core; reka-ui

Built from

Input Group

API reference

Autocomplete Autocomplete.vue

Groups all parts of the autocomplete, which lets the user type freely and pick from suggestions.

Prop	Type	Default
modelValue	string	—

defaultValue	string	—

open	boolean	—

defaultOpen	boolean	false

disabled	boolean	false

dir	Direction	—

name	string	—

required	boolean	false

resetSearchTermOnBlur	boolean	false

openOnFocus	boolean	false

openOnClick	boolean	false

ignoreFilter	boolean	false

highlightOnHover	boolean	true

loop	boolean	false

asChild	boolean	false

as	AsTag \| Component	—
Name as Description The element or component this component should render as. Can be overwritten by `asChild`. Type ComponentOptions<any, any, any, ComputedOptions, MethodOptions, any, any, any, string, {}, {}, string, {}, {}, {}, string, ComponentProvideOptions> \| (props: any, ctx: Omit<{ attrs: Attrs; slots: Readonly<InternalSlots>; emit: (event: string, ...args: any[]) => void; expose: <Exposed extends Record<string, any> = Record<string, any>>(exposed?: Exposed \| undefined) => void; }, 'expose'>): any \| ComponentPublicInstanceConstructor<any, any, any, any, ComputedOptions, MethodOptions> \| 'a' \| 'button' \| 'div' \| 'form' \| 'h2' \| 'h3' \| 'img' \| 'input' \| 'label' \| 'li' \| 'nav' \| 'ol' \| 'p' \| 'span' \| 'svg' \| 'ul' \| 'template' \| {} & string Default —

Event	Payload
update:modelValue	value: string

update:open	value: boolean

highlight	payload: { ref: HTMLElement; value: string; } \| undefined

Slot	Slot props
default	{ open: boolean; modelValue: string; }

Parts

Anatomy

Styling

Install

Built from

API reference

Autocomplete Autocomplete.vue

AutocompleteAnchor AutocompleteAnchor.vue

AutocompleteCancel AutocompleteCancel.vue

AutocompleteEmpty AutocompleteEmpty.vue

AutocompleteGroup AutocompleteGroup.vue

AutocompleteInput AutocompleteInput.vue

AutocompleteItem AutocompleteItem.vue

AutocompleteList AutocompleteList.vue

AutocompleteSeparator AutocompleteSeparator.vue

AutocompleteTrigger AutocompleteTrigger.vue

AutocompleteViewport AutocompleteViewport.vue