Autocomplete

The Autocomplete component allow user to type and select from a list of options.

DetailsProperties

Usage

The Autocomplete components renders a filterable list of options in a Popover — it does not render the text input. If you need a combination with a text input and trigger button, take a look at the Combobox component.


The autocomplete component combines a set of external libraries:

  • Uses Downshift for autocomplete
  • Uses react-tiny-virtual-list for performant list rendering
  • Uses fuzzaldrin-plus for fuzzy filtering


Default example

Open on focus

Get the openMenu prop to manually open the menu on certain events such as onFocus.

Results with an external trigger

Full width with flex and options title, onFocus, filtering, and button to trigger the autocomplete. Note that this is very similar to the Combobox component. Consider using that component before using the Autocomplete component directly.