Autocomplete
An input that suggests options as you type.
Installation
pnpm dlx shadcn@latest add @lumi-ui/autocomplete
Anatomy
<Autocomplete>
<AutocompleteInputGroup />
<AutocompleteValue />
<AutocompleteContent>
<AutocompleteStatus />
<AutocompleteEmpty />
<AutocompleteList>
<AutocompleteRow>
<AutocompleteItem />
</AutocompleteRow>
<AutocompleteSeparator />
<AutocompleteGroup>
<AutocompleteGroupLabel />
</AutocompleteGroup>
<AutocompleteCollection />
</AutocompleteList>
</AutocompleteContent>
</Autocomplete>Cookbook
Async
Load items asynchronously while typing and render custom status content.
Inline autocomplete
Autofill the input with the highlighted item while navigating with arrow keys using the mode prop. Accepts aria-autocomplete values list, both, inline, or none.
Grouped
Organize related options with <AutocompleteGroup> and <AutocompleteGroupLabel> to add section headings inside the popup.
Groups are represented by an array of objects with an items property, which itself is an array of individual items for each group. An extra property, such as value, can be provided for the heading text when rendering the group label.
Fuzzy Matching
Use fuzzy matching to find relevant results even when the query doesn’t exactly match the item text.
Limit results
Limit the number of visible items using the limit prop and guide users to refine their query using <AutocompleteStatus>.
Auto Highlight
The first matching item can be automatically highlighted as the user types by specifying the autoHighlight prop on <Autocomplete>. Set the prop’s value to always if the highlight should always be present, such as when the list is rendered inline within a dialog.
The prop can be combined with the keepHighlight and highlightItemOnHover props to configure how the highlight behaves during mouse interactions.
Grid Layout
Display items in a grid layout, wrapping each row in <AutocompleteRow> components.
Form Integration
Use autocomplete in a form.
API Reference
AutocompleteInputGroup
A composite component that combines the AutocompleteInput, Icon ,AutocompleteClear, and AutocompleteTrigger into a single styled element.
AutocompleteContent
A composite component that combines the AutocompletePortal, AutocompletePositioner, and AutocompletePopup into a single styled element for the dropdown content.