A text input that filters and suggests options from a list as the user types, with keyboard navigation, grouping, and an optional dropdown trigger and clear button.
"use client";
import {
Autocomplete,
AutocompleteInput,
AutocompletePopup,
AutocompleteEmpty,
AutocompleteList,
AutocompleteItem,
} from "@/components/ui/autocomplete";
const tags = [
"feature",
"fix",
"bug",
"docs",
"internal",
"mobile",
"component: accordion",
"component: autocomplete",
"component: avatar",
"component: checkbox",
"component: combobox",
"component: dialog",
"component: menu",
"component: select",
"component: tooltip",
];
export default function AutocompleteDemo() {
return (
<div className="flex w-full max-w-sm flex-col gap-1">
<label
className="text-sm font-medium text-foreground"
htmlFor="autocomplete-demo-input"
>
Search tags
</label>
<Autocomplete items={tags}>
<AutocompleteInput
id="autocomplete-demo-input"
placeholder="e.g. feature"
/>
<AutocompletePopup>
<AutocompleteEmpty>No tags found.</AutocompleteEmpty>
<AutocompleteList>
{(tag: string) => (
<AutocompleteItem key={tag} value={tag}>
{tag}
</AutocompleteItem>
)}
</AutocompleteList>
</AutocompletePopup>
</Autocomplete>
</div>
);
}