GitHub55X

Autocomplete

Vue autocomplete combobox to search and select from a filtered list of suggestions as you type.

API Reference
PreviousNext

Installation

Install from the Vuzeno registry:

      
      bunx --bun shadcn-vue@latest add https://vuzeno.com/r/autocomplete.json

Usage

      
      <script setup lang="ts">
import { Autocomplete } from "@/components/ui/autocomplete";
</script>

<template>
  <Autocomplete.Root>
    <!-- … -->
  </Autocomplete.Root>
</template>

Composition

      
      Autocomplete.Root
├── Autocomplete.Label
├── Autocomplete.Control
│   ├── Autocomplete.Input
│   ├── Autocomplete.Indicators
│   │   ├── Autocomplete.ClearTrigger
│   │   └── Autocomplete.Trigger
│   └── Autocomplete.Tags
├── Autocomplete.Content
│   ├── Autocomplete.Empty
│   ├── Autocomplete.Status
│   ├── Autocomplete.ItemGroup
│   │   ├── Autocomplete.ItemGroupLabel
│   │   └── Autocomplete.Item
│   └── Autocomplete.Scroller
├── Autocomplete.Context
└── Autocomplete.RootProvider

Examples

Auto Highlight

Automatically highlight the first matching item as the user types by setting inputBehavior="autohighlight".

Inline Autocomplete

Complete the input value with the first matching item by setting inputBehavior="autocomplete". Use with startsWith filter for best results.

Grouping

To group related autocomplete items, use the groupBy prop on the collection and collection.group() to iterate the groups.

Field

The Field component helps manage form-related state and accessibility attributes of an autocomplete. It includes handling ARIA labels, helper text, and error text to ensure proper accessibility.

Context

Access the autocomplete's state with Autocomplete.Context or the useAutocompleteContext hook—useful for displaying the selected value or building custom UI.

Root Provider

An alternative way to control the autocomplete is to use the RootProvider component and the useAutocomplete hook. This way you can access the state and methods from outside the component.

Links

Use the asChild prop to render the autocomplete items as links.

Rehydrate

When an autocomplete has a defaultValue or value but the collection is not loaded yet, you can rehydrate the value to populate the input.

Highlight Text

Highlight the matching search text in autocomplete items based on the user's input.

Dynamic

Generate autocomplete items dynamically based on user input. This is useful for creating suggestions or autocomplete functionality.

Creatable

Allow users to create new options when their search doesn't match any existing items. This is useful for tags, categories, or other custom values.

Multiple Selection

Enable multiple selection by setting the multiple prop. Selected items can be displayed as tags above the input.

Async Search

Load options asynchronously based on user input using the useAsyncList hook. This is useful for searching large datasets or fetching data from an API.

Virtualized

For very large lists, use virtualization with @tanstack/virtual to render only the visible items. Pass the scrollToIndexFn prop to enable keyboard navigation within the virtualized list.

Custom Object

Use the itemToString and itemToValue props to map custom objects to the required interface.

Limit Results

Use the limit property on useListCollection to limit the number of rendered items in the DOM.

API

See Ark UI Combobox docs for full props and examples.

Angle SliderAvatar