Suggest Multiple Input Guidelines

The Suggest Multiple Input provides predefined suggestions for a text input field which can handle multiple values as a list. Basically, it's the Multiselect component with the ability to use custom values.

When the user focuses on the input, suggestions appear in a list. As the user types, this list is filtered to match the typed value.
The user can either choose an item from the list, which fills the input with that item's value, or enter a custom value.

Choosing a suggestion or using a custom value turns the value into a token. The values of these tokens will be submitted as a list.

Unlike the Multiselect component, the user can enter a value not present in the list.

There can be no multiple tokens with the same value.

The Suggest Multiple Input is best suited for entering multiple values. For entering a single value, use the Suggest Input.

Best Practices

Think of the Suggest Multiple Input as a simple list building tool.

Use the Suggest Multiple Input in contexts where the system can provide a list of useful suggestions, but it's possible that the user wants to use values not present in the system.
Examples: "Allowed Domains" suggests previously used domain names; "Allowed Screen Sizes" suggests popular screen sizes; "Supported Phones" suggests available phone models.

Keyboard Controls

When list is shown:

  • Arrow keys: change selected suggestion in list.
  • Return key: add suggestion (or custom value) as a token.
  • Escape key: close list.
  • Tab: move focus between tokens.