A text input that suggests matching options as the user types while still accepting free-form text, useful for search fields and tag entry.
"use client";
import {
AutocompleteEmpty,
AutocompleteInput,
AutocompleteItem,
AutocompleteList,
AutocompletePopup,
AutocompletePortal,
AutocompletePositioner,
AutocompleteRoot,
} from "@/components/ui/autocomplete";
const fruits = [
"Apple",
"Banana",
"Cherry",
"Grape",
"Mango",
"Orange",
"Peach",
"Pear",
];
export default function AutocompleteDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<div className="w-full max-w-sm">
<AutocompleteRoot items={fruits}>
<AutocompleteInput placeholder="Search fruits..." />
<AutocompletePortal>
<AutocompletePositioner>
<AutocompletePopup>
<AutocompleteEmpty>No results found.</AutocompleteEmpty>
<AutocompleteList>
{(item: string) => (
<AutocompleteItem key={item} value={item}>
{item}
</AutocompleteItem>
)}
</AutocompleteList>
</AutocompletePopup>
</AutocompletePositioner>
</AutocompletePortal>
</AutocompleteRoot>
</div>
</div>
);
}