Skip to content


  • Stable
  • Not reviewed for accessibility

A list of items used to show autocompleted results. Use the <auto-complete> element to add functionality.

Default (stacked label)

Inline label

Note: On smaller screen sizes, the labels will be stacked.

Embedded icon with visible label

Stacked label

Inline label

Embedded icon with hidden label

Within form group

Within input group

When rendering Autocomplete with embedded icon within an input group, add .input-group-button--autocomplete-embedded-icon to .input-group-button.



Container with max-width

Additional content

Autocomplete items can contain additional content, like an .avatar. Or use utility classes to customize the text style.


The .suggester component is meant for showing suggestions while typing in a larger text area. Use the <text-expander> element to add functionality.

Edit this page on GitHub
4 contributorskhiga8simuraijonrohannicksloan
Last edited by khiga8 on March 29, 2022