New release
Introducing a visual refresh to Forma 36 React componentsRelease notes
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

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

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