## Import

```jsx
import { Autocomplete } from "@cfa/react-core";
```

## Live Editor

```jsx
function BasicExample() {
  const { contains } = useFilter({ sensitivity: "base" });
  const sauces = [
    { id: "1", name: "Chick-fil-A® Sauce" },
    { id: "2", name: "Polynesian Sauce" },
    { id: "3", name: "Honey Mustard Sauce" },
    { id: "4", name: "Garden Herb Ranch Sauce" },
  ];

  return (
    <Autocomplete filter={contains}>
      <SearchInput style={{ padding: "8px" }} placeholder="Search sauces" />
      <ListBox.Root items={sauces}>
        {(sauce) => <ListBox.Item id={sauce.id}>{sauce.name}</ListBox.Item>}
      </ListBox.Root>
    </Autocomplete>
  );
}
```

## Examples

### With ListBox

The most common way to use Autocomplete is with a ListBox to create a searchable list of options. This example shows how to filter a list of items as the user types.

```jsx
function ListBoxExample() {
  const { contains } = useFilter({ sensitivity: "base" });
  const sauces = [
    { id: "1", name: "Chick-fil-A® Sauce" },
    { id: "2", name: "Polynesian Sauce" },
    { id: "3", name: "Honey Mustard Sauce" },
    { id: "4", name: "Garden Herb Ranch Sauce" },
    { id: "5", name: "Barbeque Sauce" },
    { id: "6", name: "Sweet & Spicy Sriracha Sauce" },
    { id: "7", name: "Zesty Buffalo Sauce" },
  ];

  return (
    <Autocomplete filter={contains}>
      <SearchInput style={{ padding: "8px" }} autoFocus compact />
      <ListBox.Root items={sauces}>
        {(sauce) => <ListBox.Item id={sauce.id}>{sauce.name}</ListBox.Item>}
      </ListBox.Root>
    </Autocomplete>
  );
}
```

### With Menu

You can also use Autocomplete with a Menu component to create a searchable menu of commands or actions. This pattern is useful for command palettes or action lists.

```jsx
function MenuExample() {
  const { contains } = useFilter({ sensitivity: "base" });
  const menuItems = [
    { id: "new", name: "New Document" },
    { id: "open", name: "Open File..." },
    { id: "save", name: "Save" },
    { id: "save-as", name: "Save As..." },
    { id: "print", name: "Print..." },
    { id: "export", name: "Export as PDF" },
    { id: "share", name: "Share Document" },
    { id: "preferences", name: "Preferences" },
  ];

  return (
    <Autocomplete filter={contains}>
      <Label>Report Commands</Label>
      <SearchInput placeholder="Search Commands" compact />
      <Menu.Container items={menuItems}>
        {(item) => (
          <Menu.Item
            onAction={() => alert("You selected " + item.name)}
            id={item.id}
            textValue={item.name}
          >
            {item.name}
          </Menu.Item>
        )}
      </Menu.Container>
    </Autocomplete>
  );
}
```

### With Select

The Autocomplete component can be integrated with a Select to create a searchable dropdown menu.

```jsx
function SelectExample() {
  const { contains } = useFilter({ sensitivity: "base" });
  const sauces = [
    { id: "1", name: "Chick-fil-A® Sauce" },
    { id: "2", name: "Polynesian Sauce" },
    { id: "3", name: "Honey Mustard Sauce" },
    { id: "4", name: "Garden Herb Ranch Sauce" },
    { id: "5", name: "Barbeque Sauce" },
    { id: "6", name: "Sweet & Spicy Sriracha Sauce" },
    { id: "7", name: "Zesty Buffalo Sauce" },
  ];

  return (
    <Select.Root placeholder="Select a sauce">
      <Select.Label>Sauces</Select.Label>
      <Select.Button>
        <Select.Value />
      </Select.Button>
      <Select.Popover>
        <Autocomplete filter={contains}>
          <SearchInput style={{ padding: "8px" }} autoFocus compact />
          <Select.List items={sauces}>
            {(sauce) => <Select.Item id={sauce.id}>{sauce.name}</Select.Item>}
          </Select.List>
        </Autocomplete>
      </Select.Popover>
    </Select.Root>
  );
}
```

## Props

### Autocomplete

| Name | Type | Default | Description |
| :--- | :--- | :--- | :--- |
| children\* | `ReactNode` | - | The children wrapped by the autocomplete. Consists of at least an input element and a collection element to filter. |
| defaultInputValue | `string` | - | The default value of the autocomplete input (uncontrolled). |
| disableAutoFocusFirst | `boolean` | `false` | Whether or not to focus the first item in the collection after a filter is performed. Note this is only applicable&#xA;if virtual focus behavior is not turned off via \`disableVirtualFocus\`. |
| disableVirtualFocus | `boolean` | `false` | Whether the autocomplete should disable virtual focus, instead making the wrapped collection directly tabbable. |
| filter | `(textValue: string, inputValue: string, node: Node<T>) => boolean` | - | An optional filter function used to determine if a option should be included in the autocomplete list.&#xA;Include this if the items you are providing to your wrapped collection aren't filtered by default. |
| inputValue | `string` | - | The value of the autocomplete input (controlled). |
| onInputChange | `(value: string) => void` | - | Handler that is called when the autocomplete input value changes. |
| slot | `string` | - | A slot name for the component. Slots allow the component to receive props from a parent component.&#xA;An explicit \`null\` value indicates that the local props completely override all props received from a parent. |