Autocomplete

A text input that filters and suggests matching options from a list as the user types, with support for grouping, icons, and grid layouts.

@delego

byappica-dev

"use client";

import {
  Autocomplete,
  AutocompleteInput,
  AutocompleteContent,
  AutocompleteEmpty,
  AutocompleteList,
  AutocompleteItem,
} from "@/components/ui/autocomplete";

const frameworks = [
  "Next.js",
  "Remix",
  "Astro",
  "Nuxt.js",
  "SvelteKit",
  "SolidStart",
  "Gatsby",
  "Vite",
];
const sizes = ["sm", "md", "lg"] as const;

export default function AutocompleteSizes() {
  return (
    <div className="flex w-full max-w-70 flex-col gap-4">
      {sizes.map((size) => (
        <div key={size}>
          <Autocomplete items={frameworks} size={size}>
            <AutocompleteInput
              placeholder="Search a framework"
              aria-label={`Search (${size})`}
            />
            <AutocompleteContent>
              <AutocompleteEmpty>No frameworks found.</AutocompleteEmpty>
              <AutocompleteList>
                {(item: string) => (
                  <AutocompleteItem key={item} value={item}>
                    {item}
                  </AutocompleteItem>
                )}
              </AutocompleteList>
            </AutocompleteContent>
          </Autocomplete>
        </div>
      ))}
    </div>
  );
}