Version 4 beta
Forma 36 v4 beta is availableClick here to go to the new version
Forma 36

Autocomplete

StorybookGithub
alpha

The autocomplete component is an input field that provides selectable suggestions as a user types into it. It allows users to quickly search through and select from large collections of options. Keep in mind that this component is still in alpha state, which means it's unsupported and subject to breaking changes without warning.

Table of contents

How to use autocomplete

Autocomplete expects two callback Functions.

  • handleQueryChange called while a user types. This function should take care of filtering and refetching your items.
  • onChange called when a user selects one of the Options.

You can use Autocomplete either for a single or a multi selection, by either saving all selected items in an array of items or forwarding only the last selected Item in the onChange callback..

Best practices

  • Autocomplete should have a clear label so user understands what type of action is possible
  • Consider using autocomplete over selects if user will be will be choosing from a very long list, like for example country list.

Code examples

Default Usage, set the selected item as value of the text input.

Usage for filling in a list of items.

Example for showing error messages

Content recommendations

  • Autocomplete label should be short, contain 1 to 3 words
  • Label should be written in a sentence case (the first word capitalized, the rest lowercase)

Accessibility

  • dismisses the dropdown when selecting with the enter key