Autocomplete

A searchable combobox / typeahead component. Supports single and multi-select, grouped options, free-form input, and keyboard navigation.

Import

import { Autocomplete } from "poyraz-ui/molecules";

Single Select

Basic autocomplete with single selection.

const [value, setValue] = useState("");

<Autocomplete
  options={languages}
  value={value}
  onValueChange={(v) => setValue(v as string)}
  placeholder="Search a language…"
/>

Async States

Loading, empty and error states preserve the same combobox anatomy and live-region semantics.

<Autocomplete options={[]} state="loading" loadingText="Searching…" />
<Autocomplete options={[]} state="ready" emptyContent="No matching technologies." />
<Autocomplete options={[]} state="error" errorText="Could not load technologies." />

Multiple Select

Select multiple options with tag-style chips.

const [value, setValue] = useState<string[]>([]);

<Autocomplete
  options={fruits}
  value={value}
  onValueChange={(v) => setValue(v as string[])}
  placeholder="Pick fruits…"
  multiple
/>

Grouped Options

Options organized by group headers.

<Autocomplete
  options={[
    { value: "apple", label: "Apple", group: "Popular" },
    { value: "cherry", label: "Cherry", group: "Berries" },
    { value: "mango", label: "Mango", group: "Tropical" },
  ]}
  value={value}
  onValueChange={setValue}
/>

Free Solo

Allow entering custom values not in the option list.

<Autocomplete
  options={languages}
  value={value}
  onValueChange={(v) => setValue(v as string[])}
  placeholder="Type anything…"
  multiple
  freeSolo
/>

pnpm dlx shadcn@latest add @poyraz/autocomplete

Runtime dependencies

lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/poyraz-recipes

Installed files

@ui/molecules/autocomplete.tsx