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…"
/>

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
/>