---
title: Autocomplete
description: An input that suggests options as you type.
links:
  doc: https://base-ui.com/react/components/autocomplete
  anatomy: https://base-ui.com/react/components/autocomplete#anatomy
  api: https://base-ui.com/react/components/autocomplete#api-reference
---

```tsx
"use client";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
  { label: "Blueberry", value: "blueberry" },
  { label: "Raspberry", value: "raspberry" },
  { label: "Blackberry", value: "blackberry" },
  { label: "Cherry", value: "cherry" },
  { label: "Papaya", value: "papaya" },
  { label: "Cantaloupe", value: "cantaloupe" },
  { label: "Honeydew", value: "honeydew" },
  { label: "Lemon", value: "lemon" },
  { label: "Lime", value: "lime" },
  { label: "Coconut", value: "coconut" },
  { label: "Pomegranate", value: "pomegranate" },
  { label: "Fig", value: "fig" },
  { label: "Date", value: "date" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items}>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        inputGroupProps={{ className: "max-w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

## Installation

<ComponentSource name="autocomplete" title="components/ui/autocomplete.tsx" />

## Usage

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

```tsx
const items = [
  { value: "apple", label: "Apple" },
  { value: "banana", label: "Banana" },
  { value: "orange", label: "Orange" },
  { value: "grape", label: "Grape" },
]

<Autocomplete items={items}>
  <AutocompleteInput placeholder="Search..." />
  <AutocompletePopup>
    <AutocompleteEmpty>No results found.</AutocompleteEmpty>
    <AutocompleteList>
      {(item) => <AutocompleteItem key={item.value} value={item}>{item.label}</AutocompleteItem>}
    </AutocompleteList>
  </AutocompletePopup>
</Autocomplete>
```

## Examples

### Sizes

```tsx
"use client";

import { IconSearch } from "@tabler/icons-react";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

const sizes = ["xs", "sm", "default", "lg", "xl"] as const;

export function AutocompleteDemo() {
  return (
    <div className="flex flex-col gap-4">
      {sizes.map((size) => (
        <Autocomplete key={size} items={items}>
          <AutocompleteInput
            aria-label="Search items"
            placeholder="Search items…"
            size={size}
            startAddon={<IconSearch />}
            showClear
            showTrigger
          />
          <AutocompletePopup>
            <AutocompleteEmpty>No items found.</AutocompleteEmpty>
            <AutocompleteList>
              {(item) => (
                <AutocompleteItem key={item.value} value={item}>
                  {item.label}
                </AutocompleteItem>
              )}
            </AutocompleteList>
          </AutocompletePopup>
        </Autocomplete>
      ))}
    </div>
  );
}
```

### Disabled

```tsx
"use client";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items} disabled>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        inputGroupProps={{ className: "w-fit" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### With label

```tsx
"use client";

import { useId } from "react";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  const id = useId();

  return (
    <Autocomplete items={items}>
      <div className="flex flex-col items-start gap-2">
        <label htmlFor={id}>Fruits</label>
        <AutocompleteInput aria-label="Search items" id={id} placeholder="Search items…" />
      </div>
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### Inline autocomplete

Controls how the autocomplete behaves with respect to list filtering and inline autocompletion.

- `list` (default): items are dynamically filtered based on the input value. The input value does not change based on the active item.
- `both`: items are dynamically filtered based on the input value, which will temporarily change based on the active item (inline autocompletion).
- `inline`: items are static (not filtered), and the input value will temporarily change based on the active item (inline autocompletion).
- `none`: items are static (not filtered), and the input value will not change based on the active item.

```tsx
"use client";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items} mode="both">
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        inputGroupProps={{ className: "max-w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### Auto highlight

Whether the first matching item is highlighted automatically.

- `true` - Highlight after the user types and keep the highlight while the query changes.
- `always` - Always highlight the first item.

```tsx
"use client";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items} autoHighlight>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        inputGroupProps={{ className: "max-w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### With clear button

Pass `showClear` prop to the `AutocompleteInput` component to show a clear button.

```tsx
"use client";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items}>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        showClear
        inputGroupProps={{ className: "w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### With clear & trigger button

Pass `showClear` and `showTrigger` props to the `AutocompleteInput` component to show both buttons.

```tsx
"use client";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items}>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        showTrigger
        showClear
        inputGroupProps={{ className: "w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### With start addon

Use the `startAddon` prop to add an icon or any other element before the input.

```tsx
"use client";

import { IconSearch } from "@tabler/icons-react";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={items}>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        startAddon={<IconSearch />}
        inputGroupProps={{ className: "w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### Grouped

```tsx
"use client";

import {
  Autocomplete,
  AutocompleteCollection,
  AutocompleteEmpty,
  AutocompleteGroup,
  AutocompleteGroupLabel,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
  groupAutocompleteItems,
} from "@/components/ui/autocomplete";

type Item = {
  label: string;
  value: string;
  group: string;
};

const items: Item[] = [
  { label: "React", value: "react", group: "Frontend" },
  { label: "Vue", value: "vue", group: "Frontend" },
  { label: "Angular", value: "angular", group: "Frontend" },
  { label: "Svelte", value: "svelte", group: "Frontend" },
  { label: "Next.js", value: "nextjs", group: "Frontend" },
  { label: "Nuxt.js", value: "nuxtjs", group: "Frontend" },

  { label: "Node.js", value: "nodejs", group: "Backend" },
  { label: "Django", value: "django", group: "Backend" },
  { label: "Flask", value: "flask", group: "Backend" },
  { label: "Ruby on Rails", value: "rails", group: "Backend" },
  { label: "Spring Boot", value: "springboot", group: "Backend" },

  { label: "Flutter", value: "flutter", group: "Mobile" },
  { label: "React Native", value: "reactnative", group: "Mobile" },
  { label: "SwiftUI", value: "swiftui", group: "Mobile" },
  { label: "Kotlin Multiplatform", value: "kotlinmultiplatform", group: "Mobile" },
];

const groupedItems = groupAutocompleteItems(items);

type GroupItem = (typeof groupedItems)[number];

export function AutocompleteDemo() {
  return (
    <Autocomplete items={groupedItems}>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search frameworks..."
        inputGroupProps={{ className: "w-fit" }}
        showTrigger
        showClear
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(group: GroupItem) => (
            <AutocompleteGroup key={group.value} items={group.items}>
              <AutocompleteGroupLabel>{group.value}</AutocompleteGroupLabel>
              <AutocompleteCollection>
                {(item: Item) => (
                  <AutocompleteItem key={item.value} value={item}>
                    {item.label}
                  </AutocompleteItem>
                )}
              </AutocompleteCollection>
            </AutocompleteGroup>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### Limit results

```tsx
"use client";

import { useMemo, useState } from "react";

import { IconSearch } from "@tabler/icons-react";

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

const items = [
  { label: "Apple", value: "apple" },
  { label: "Banana", value: "banana" },
  { label: "Orange", value: "orange" },
  { label: "Grape", value: "grape" },
  { label: "Strawberry", value: "strawberry" },
  { label: "Mango", value: "mango" },
  { label: "Pineapple", value: "pineapple" },
  { label: "Kiwi", value: "kiwi" },
  { label: "Peach", value: "peach" },
  { label: "Pear", value: "pear" },
  { label: "Watermelon", value: "watermelon" },
];

const limit = 5;

export function AutocompleteDemo() {
  const [value, setValue] = useState("");

  const { contains } = useAutocompleteFilter({ sensitivity: "base" });

  const totalMatches = useMemo(() => {
    const trimmed = value.trim();
    if (!trimmed) {
      return items.length;
    }
    return items.filter((t) => contains(t.value, trimmed)).length;
  }, [value, contains]);

  const moreCount = Math.max(0, totalMatches - limit);

  return (
    <Autocomplete items={items} limit={limit} value={value} onValueChange={setValue}>
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        startAddon={<IconSearch />}
        inputGroupProps={{ className: "w-64" }}
      />
      <AutocompletePopup>
        <AutocompleteEmpty>No items found.</AutocompleteEmpty>
        <AutocompleteList>
          {(item) => (
            <AutocompleteItem key={item.value} value={item}>
              {item.label}
            </AutocompleteItem>
          )}
        </AutocompleteList>
        {moreCount > 0 && (
          <AutocompleteStatus>+{moreCount} more (keep typing to narrow down)</AutocompleteStatus>
        )}
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

### Async search

```tsx
"use client";

import { useEffect, useState } from "react";

import {
  Autocomplete,
  AutocompleteEmpty,
  AutocompleteInput,
  AutocompleteItem,
  AutocompleteList,
  AutocompletePopup,
  AutocompleteStatus,
  useAutocompleteFilter,
} from "@/components/ui/autocomplete";
import { Spinner } from "@/components/ui/spinner";

interface Movie {
  id: string;
  title: string;
  year: number;
}

const top20Movies: Movie[] = [
  { id: "1", title: "The Shawshank Redemption", year: 1994 },
  { id: "2", title: "The Godfather", year: 1972 },
  { id: "3", title: "The Dark Knight", year: 2008 },
  { id: "4", title: "The Godfather Part II", year: 1974 },
  { id: "5", title: "12 Angry Men", year: 1957 },
  { id: "6", title: "The Lord of the Rings: The Return of the King", year: 2003 },
  { id: "7", title: "Schindler's List", year: 1993 },
  { id: "8", title: "Pulp Fiction", year: 1994 },
  { id: "9", title: "The Lord of the Rings: The Fellowship of the Ring", year: 2001 },
  { id: "10", title: "The Good, the Bad and the Ugly", year: 1966 },
  { id: "11", title: "Forrest Gump", year: 1994 },
  { id: "12", title: "The Lord of the Rings: The Two Towers", year: 2002 },
  { id: "13", title: "Fight Club", year: 1999 },
  { id: "14", title: "Inception", year: 2010 },
  { id: "15", title: "Star Wars: Episode V – The Empire Strikes Back", year: 1980 },
  { id: "16", title: "The Matrix", year: 1999 },
  { id: "17", title: "Goodfellas", year: 1990 },
  { id: "18", title: "Interstellar", year: 2014 },
  { id: "19", title: "One Flew Over the Cuckoo's Nest", year: 1975 },
  { id: "20", title: "Se7en", year: 1995 },
];

async function searchMovies(
  query: string,
  filter: (item: string, query: string) => boolean
): Promise<Movie[]> {
  await new Promise((resolve) => setTimeout(resolve, Math.random() * 500 + 100));
  if (Math.random() < 0.01 || query === "will_error") {
    throw new Error("Network error");
  }
  return top20Movies.filter(
    (movie) => filter(movie.title, query) || filter(movie.year.toString(), query)
  );
}

export function AutocompleteDemo() {
  const [searchValue, setSearchValue] = useState("");
  const [isLoading, setIsLoading] = useState(false);
  const [searchResults, setSearchResults] = useState<Movie[]>([]);
  const [error, setError] = useState<string | null>(null);
  const { contains } = useAutocompleteFilter();

  useEffect(() => {
    if (!searchValue) {
      setSearchResults([]);
      setIsLoading(false);
      return;
    }
    setIsLoading(true);
    setError(null);
    let ignore = false;
    const timeoutId = setTimeout(async () => {
      try {
        const results = await searchMovies(searchValue, contains);
        if (!ignore) setSearchResults(results);
      } catch {
        if (!ignore) {
          setError("Failed to fetch movies. Please try again.");
          setSearchResults([]);
        }
      } finally {
        if (!ignore) setIsLoading(false);
      }
    }, 300);
    return () => {
      clearTimeout(timeoutId);
      ignore = true;
    };
  }, [searchValue, contains]);

  return (
    <Autocomplete
      items={searchResults}
      itemToStringValue={(item: unknown) => (item as Movie).title}
      value={searchValue}
      onValueChange={setSearchValue}
    >
      <AutocompleteInput
        aria-label="Search items"
        placeholder="Search items…"
        inputGroupProps={{ className: "w-64" }}
      />
      <AutocompletePopup>
        {isLoading || (
          <AutocompleteEmpty>
            Movie or year "{searchValue}" does not exist in the Top 20 movies
          </AutocompleteEmpty>
        )}
        <AutocompleteStatus className="border-b">
          {isLoading ? (
            <span className="flex items-center justify-between gap-2 text-muted-foreground">
              Searching....
              <Spinner className="sm:size-4" />
            </span>
          ) : (
            <span>
              {searchResults.length} result{searchResults.length === 1 ? "" : "s"} found
            </span>
          )}
          {error && <span className="text-danger">{error}</span>}
        </AutocompleteStatus>
        <AutocompleteList scrollArea={true}>
          {(movie) => (
            <AutocompleteItem key={movie.id} value={movie}>
              <div className="flex w-full flex-col gap-1">
                <div className="font-medium">{movie.title}</div>
                <div className="text-muted-foreground text-xs">{movie.year}</div>
              </div>
            </AutocompleteItem>
          )}
        </AutocompleteList>
      </AutocompletePopup>
    </Autocomplete>
  );
}
```

## API Reference

### Autocomplete Input props

<ApiReferenceAccordion
  type={{
    size: {
      description: "The size of the button.",
      type: "'xs' | 'sm' | 'default' | 'lg' | 'xl' | 'icon-sm' | 'icon' | 'icon-lg' | 'icon-xl'",
      default: `'default'`,
    },
    showTrigger: {
      description: "Whether to show the trigger button.",
      type: "boolean",
      default: `false`,
    },
    showClear: {
      description: "Whether to show the clear button.",
      type: "boolean",
      default: `false`,
    },
    startAddon: {
      description: "An element to display before the input.",
      type: "React.ReactNode",
    },
    triggerProps: {
      description: "Props to pass to the trigger button.",
      type: "React.ComponentProps<typeof AutocompleteTrigger>",
    },
    clearProps: {
      description: "Props to pass to the clear button.",
      type: "React.ComponentProps<typeof AutocompleteClear>",
    },
  }}
/>

### Autocomplete Positioner props

<ApiReferenceAccordion
  type={{
    sideOffset: {
      description: "The distance in pixels from the trigger to the popup.",
      type: "number",
      default: `4`,
    },
  }}
/>

### Autocomplete Popup props

<ApiReferenceAccordion
  type={{
    portalProps: {
      description: "Props to pass to the portal.",
      type: "React.ComponentProps<typeof AutocompletePortal>",
    },
    positionerProps: {
      description: "Props to pass to the positioner.",
      type: "React.ComponentProps<typeof AutocompletePositioner>",
    },
  }}
/>

### Autocomplete List props

<ApiReferenceAccordion
  type={{
    scrollArea: {
      description:
        "Whether to wrap the list in a scroll area. If false, native scrollbar will be shown if the list exceeds the max height.",
      type: "boolean",
      default: `true`,
    },
  }}
/>