Autocomplete

ReactProps

Github Storybook Markdown Copy for LLM

An autocomplete combines a TextInput or SearchInput with a Menu or ListBox, allowing users to search or filter a list of suggestions.

Import

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

Live Editor

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.

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.

With Select

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

Searchable Multi-Select

Combine Autocomplete with Select and selectionMode="multiple" to create a searchable multi-select dropdown.

Searchable Multi-Select with Tags

Display selected items as tags inside the select button using TagGroup. Do not pass onRemove to TagGroup.Root in this pattern.

Note: This example uses Select, so dismissible tags are not supported for the same reason as multiple selection with tags on Select: remove buttons would be nested inside Select.Button, which is invalid HTML.

Visit the Documentation Site for the full list of props.