A text input that filters and suggests matching options from a list as the user types, with keyboard navigation and selection.
"use client";
import {
Autocomplete,
AutocompleteContent,
AutocompleteEmpty,
AutocompleteInputGroupContent,
AutocompleteItem,
AutocompleteList,
} from "@/components/ui/autocomplete";
import { SearchIcon } from "lucide-react";
function AutocompleteDemo() {
return (
<div className="flex w-full items-center justify-center p-10">
<Autocomplete items={tags}>
<AutocompleteInputGroupContent
addonIcon={<SearchIcon />}
aria-label="Search framework"
className="w-64"
placeholder="e.g. Next.js"
showClear
showTrigger
/>
<AutocompleteContent sideOffset={12}>
<AutocompleteEmpty>No tags found.</AutocompleteEmpty>
<AutocompleteList>
{(tag: Tag) => (
<AutocompleteItem key={tag.id} value={tag}>
{tag.value}
</AutocompleteItem>
)}
</AutocompleteList>
</AutocompleteContent>
</Autocomplete>
</div>
);
}
interface Tag {
id: string;
value: string;
}
const tags: Tag[] = [
{ id: "next-js", value: "Next.js" },
{ id: "react", value: "React" },
{ id: "vue", value: "Vue" },
{ id: "svelte", value: "Svelte" },
{ id: "svelteKit", value: "SvelteKit" },
{ id: "angular", value: "Angular" },
{ id: "solid", value: "Solid" },
{ id: "qwik", value: "Qwik" },
{ id: "remix", value: "Remix" },
];
export default AutocompleteDemo;