Skip to main content

Suggest Multiple Input Guidelines

The Suggest Multiple Input provides predefined suggestions for a text input field that can handle multiple values as a list. It's essentially 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 or enter a custom value. Choosing a suggestion or entering 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 it 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 the 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.