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

Type Purpose
Autocomplete string This version is used when you want users to select from string matches and items.
Autocomplete tags This 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:

3px outline with color BL 1, BLUE Complement, a direct complement color of 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
Mobile

For example search, with the Search Field component:

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

    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