Autocomplete

Guidelines React

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.

Visit the Documentation Site for the full list of props.

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 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. 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. An explicit `null` value indicates that the local props completely override all props received from a parent.