Autosuggest

Owned by Jon F, created
Last updated: Aug 16, 2022
2 min read

 Component basics

Title

Form.Autosuggest

Description

Note
This is a proposal to make a Paragon component based on the existing “Country/Region” field used on the edX registration page.

Description
The Autosuggest component enables users to manually select or type to find matching options to partial text input.

Anatomy diagram

https://www.figma.com/file/eGmDp94FlqEr4iSqy1Uc1K/Paragon-Design-System?node-id=31313%3A80427

 

 Specifications

Usage

This component allows users to select an item from a list of options in two ways:

1. Users can scroll through a menu to make a selection

2. Users can type to filter out non-matching options in a menu, and then make a selection from the filtered list

Usage

This component allows users to select an item from a list of options in two ways:

1. Users can scroll through a menu to make a selection

2. Users can type to filter out non-matching options in a menu, and then make a selection from the filtered list

Variations

None

 

Behavior

Match the behavior of the Country/Region field used on the edX registration page with the addition of a spinner in the menu to be displayed when loading:

  • Show field hover state and change cursor to “I-beam” when user hovers over the editable area in the text field

  • Change cursor to “Pointing hand” when user hovers over trailing icon

  • Show the menu when user clicks the trailing icon

  • Show the menu when users begin typing in the field

  • Show menu items that contain a match to what the user has typed

  • Update the menu after every keystroke

  • Show the spinner component for items loading in the menu when necessary

  • Users can also select an item directly from the menu without typing

Style

The component should be styled no differently than the components used to create it (menu, text field, spinner)

 

 Additional guidance

Content

  • The field can contain placeholder text, e.g. “Select a country”, or a preselected item “United States”

  • There is no minimum character length users must type before displaying matching items in the menu

Content

  • The field can contain placeholder text, e.g. “Select a country”, or a preselected item “United States”

  • There is no minimum character length users must type before displaying matching items in the menu

Accessibility

  •  

Mobile

  •  

Best practices

  • Do consider using this component when users must select an item from a long list of options.

  • Do not use placeholder text identical to an item in the menu. For example, use “Select a country” instead of “United States”.

Related