Back to components

Autocomplete

Autocompletes allow users to enter any combination of letters, numbers, or symbols of their choosing (unless otherwise restricted), and receive one or more suggested matches in a list below the input.

Tips: start searching: "how do i.."
  1. how do I convert to pdf
  2. how do I convert to muslim
  3. how do I convert to judaism
  4. how do I convert to christianity
  5. how do I convert to catholic
  6. how do I convert to mp3

Table of Contents

Edit this section, Opens in new window

Overview

Unlike a Select (single- or multi-) that lets you select options from an options menu, the Autocomplete component has other behavior beyond choosing an option as the value for a setting, such as linking to other content.

Other relevant components:

Edit this section, Opens in new window

Variations

TypePurpose
Autocomplete stringThis version is used when you want users to select from string matches and items.
Autocomplete tagsThis version is used when you want users to selected predefined tags, like filters.
Edit this section, Opens in new window

Usage

Principles

  • User can type, and if suggestions is found, they appear with the matched string highlighted
  • User can navigate through the suggestions with ↑ UP and ↓ DOWN arrow keys
Edit this section, Opens in new window

Behaviours

The default behaviour of the autocomplete input element is like any other input element. They key difference is a list of suggestions popping up when typing.

Interactions

No results

Tips: start searching: "how do i.."
  1. No results

When no results is found, a "No results" message is displayed

Loading state

Tips: start searching: "Bar"

    If autocomplete options are likely to take longer than 1 second to show for the majority of users, display a loading indicator.

    Focus

    Tips: start searching: "Bar"
    1. Barks väg 15, 106 80 Solna, Sverige
    2. Barks väg 16, 106 80 Solna, Sverige

    The autocomplete suggestion element follows the same principles for default focus styling when keyboard is used:

    2px dotted outline with color BL 1, BLUE.

    Tips: start searching: "Bar"
    1. Barks väg 15, 106 80 Solna, Sverige
    2. Barks väg 16, 106 80 Solna, Sverige
    Mouse focus

    No general mouse focus, but when an item is hovered or selected, it receives fill color BE 3, LIGHT BEIGE

    Edit this section, Opens in new window

    Autocomplete string

    The autocomplete string version is used when you want users to select from string matches and items.

    Tips: start typing: "how do i.."
    1. how do I convert to pdf
    2. how do I convert to muslim
    3. how do I convert to judaism
    4. how do I convert to christianity
    5. how do I convert to catholic
    6. how do I convert to mp3
    Tips: start typing: "how do i.."
    1. how do I convert to pdf
    2. how do I convert to muslim
    3. how do I convert to judaism
    4. how do I convert to christianity
    5. how do I convert to catholic
    6. how do I convert to mp3
    Mobile

    For example search, with the Search Field component:

    Open pages

    Edit this section, Opens in new window

    Autocomplete tags

      Create tags by typing and use comma , or Enter to add them
      1. immovableness
      2. imbrium
      Create tags by typing and use comma , or Enter to add them

      Usage

      Principles

      • Tags are created either with comma separated words or space separated phrases
      • If applicable a predefined set of tags can appear as autocomplete with suggestions
      • User can navigate through the suggestions with ↑ UP and ↓ DOWN arrow keys
      • User can use backspace to remove tags
      • User can click the cross in the tag to remove the tag
      • Every tag removed is put back into the array of suggestions, for historical usage

      Anatomy

      The autocomplete suggestions follow the same principles as a basic autocomplete.

      1. immovableness
      2. imbrium
      Create tags by typing and use comma , or Enter to add them
      Edit this section, Opens in new window

      Accessibility

      See WAI-ARIA Authoring Practices 1.1: Combo Box and ARIA 1.1 Combobox with Listbox Popup Examples for more details.

      Keyboard navigation

      • When tabbing forward or backward through the page, let the autocomplete text input take keyboard focus with the tab key
      • Let people navigate through the list of autocomplete options using the up and down arrow keys
      • Let people select the option that has focus using the Enter key

      Announcements

      Let people using screen readers know when new options are presented while typing. This requires testing to avoid excessively noisy announcements.

      If the Autocomplete component causes a change to content on the page, use ARIA live regions to inform screen reader users of what's changed.

      Edit this section, Opens in new window

      Anatomy

      • Suggestions: the bit that drops down from an input field to show Autocomplete suggestions.
      • Autocomplete suggestion item: the suggestions menu that lets you choose a suggestion.
      • Each suggestion may be presented as plain text or with icons.
      Tips: start searching: "how do i.."
      1. how do I convert to pdf
      2. how do I convert to muslim
      3. how do I convert to judaism
      4. how do I convert to christianity
      5. how do I convert to catholic
      6. how do I convert to mp3
      1. Suggestions
      2. Selected/Hovered
      3. Emphasized matched string
      Edit this section, Opens in new window

      Specs

      Tips: start searching: "how do i.."
      1. how do I convert to pdf
      2. how do I convert to muslim
      3. how do I convert to judaism
      4. how do I convert to christianity
      5. how do I convert to catholic
      6. how do I convert to mp3
      Edit this section, Opens in new window
      Contact us, Opens in new window