Combobox

Best practices

A Combobox allows a user to select a single value from a styled listbox of options. Each option can consist of more than just text, e.g. text paired with an icon. However, an option can only be paired with non-interactive content and shouldn’t contain components like a checkbox or button. It is set up with autocomplete functionality so users can easily find a specific option.

When to use

• When you let users choose from a long list of options (15 or more).
• When it’s faster to find the right option by typing than choosing from the list.
• When users would benefit from autocomplete functionality (e.g., autocomplete, search). For example, autocomplete may be useful when users need to select from a list of more than 15 options.

When not to use

• When the list is short.
• When you want to make user go through all the options.
• When you need a native picker experience, especially on mobile devices.
• When users will be selecting from a list of 4-10 options, or a sorted list of highly familiar options (e.g., alphabetical list of states or countries).

Anatomy

1. Label: Field labels should indicate what information the field requires.
2. Text input: The field people click in to receive the options they can choose from. Once selected, the option will be shown in the text input.
3. Dropdown menu: Contains the list of all selectable items.
4. List option: The individual options to select or deselect.
5. Placeholder text: Includes information that supports the field label and other contextual cues, for example, “Start typing to see names”. It should not be necessary to understand how to use the component.

Behaviour

The autocomplete Combobox allows users to filter the list of options by typing into the input directly. This is useful when a user needs to filter a list of options, or when there are more than 15 options as users may find it difficult to navigate with only scrolling.

If the amount of options isn’t so big and/or it’s expected that the user goes through all of them before making a choice, consider using the Dropdown component instead.

Content guidelines

• Labels serve to clearly present what’s expected. They’re especially important for people who don’t see other visual cues. But they also help everyone know exactly what to enter.
• For the label, use short descriptive phrases, ideally nouns that make the request clear.
• For more complicated fields, sometimes labels aren’t enough. You want to include any necessary information as clear as possible to help users complete the fields.
• Use help messages to guide users before they enter anything and clear calm error messages when there’s a problem with what they entered.
• Remember that such messages are likely to invoke negative feelings, so be positive and focused on solutions to any problems.