Components
Loading preview...
An autocomplete input component with filtering, grouping, trigger/clear buttons, and keyboard navigation. Built on Base UI Autocomplete primitives.
@reapollo
npx shadcn@latest add https://21st.dev/r/larsen66/coss-autocomplete"use client";
import { SearchIcon } from "lucide-react";
import {
Autocomplete,
AutocompleteInput,
AutocompletePopup,
AutocompleteList,
AutocompleteItem,
AutocompleteEmpty,
useAutocompleteFilter,
} from "@/components/ui/coss-autocomplete";
const frameworks = [
{ label: "React", value: "react" },
{ label: "Vue", value: "vue" },
{ label: "Angular", value: "angular" },
{ label: "Svelte", value: "svelte" },
{ label: "Next.js", value: "nextjs" },
{ label: "Nuxt", value: "nuxt" },
{ label: "Remix", value: "remix" },
{ label: "Astro", value: "astro" },
];
export default function AutocompleteSearchIconDemo() {
const filterOptions = useAutocompleteFilter();
return (
<div className="flex min-h-screen w-full items-center justify-center bg-background p-8">
<div className="w-full max-w-xl">
<Autocomplete items={frameworks} getOptionLabel={(o) => (o as any).label}>
<AutocompleteInput
placeholder="Search..."
filterOptions={filterOptions}
startAddon={<SearchIcon />}
showClear
/>
<AutocompletePopup>
<AutocompleteList>
{(item, state) => (
<AutocompleteItem key={(item as any).value} value={item}>
{(item as any).label}
</AutocompleteItem>
)}
</AutocompleteList>
<AutocompleteEmpty>No results found.</AutocompleteEmpty>
</AutocompletePopup>
</Autocomplete>
</div>
</div>
);
}