Skip to content

Autocomplete

Stable

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.

Stacked

Inline

Container with max-width

Additional content

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

Suggester

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