Autocomplete

The autocomplete component offers a simple and flexible type-ahead experience for larger data sets or API-backed search.

Use density to adjust the vertical space within the field. The available options are default, comfortable, and compact.

Use the multiple prop to select more than one item. The value is stored as an array.

Use clearable to add quick input clearing for the current selection.

Use chips to render selected items as compact removable tokens.

The custom-filter prop lets you filter each item with custom logic, such as matching names and abbreviations.

Slots let you customize both the chip content and the list item presentation, including avatars.

Sometimes you need to load data externally based on the search query.

A combination of autocomplete slots and transitions can create a stylish toggleable state selector.

Use rules to validate the autocomplete. Rules can return booleans, strings, or functions.