Combobox

Comboboxes enable users to select one option from a menu or input custom text. This component combines an input field and single-select listbox to ensure users can find and select an option quickly.

Also known as: Combo box, autocomplete, autosuggest, UIPickerView (iOS), Spinner (Android), Menu (Android), MenuItem (Android).

Anatomy

A. Label (required): Text summarizing the options available for selection.
B. Input (required): Text field enabling users to enter custom text or filter menu options.
C. Inline message (optional): Brief text describing the field label in more detail.
D. Chevron icon button (optional): UI icon button that expands or collapses the menu.
E. Leading icon (optional): Visual indication that the input field is interactive.
F. Clear text button (optional): UI icon button that clears the text input or selected option.
G. Menu (required): Container displaying the list of options that includes scrollbar as needed.
H. Option (required): Selectable text representing a single option.

Usage

Best practices

• Ensure the selected option appears visually different from unselected options by using an icon and selected state.
• Ensure users can select anywhere within an option label to select an option.
• List options in a logical order, either alphabetically or according to the most common or likely selection.
• Ensure comboboxes appear collapsed on page load to save space.

Clear text button

Clear text buttons allow users to clear their input or selection from the field.

• Only display the clear text button when the user is actively inputting text to prevent confusion or accidental clearing.

Chevron direction

The chevron UI icon button enables users to manually expand or collapse the menu. The direction it points should indicate what happens when it’s selected.

Leading icons

Leading icons are placed at the beginning of an input field and are not interactive. They visually indicate the type of information required, such as an avatar for selecting a recipient.

• Use one leading icon per input field as multiple icons can confuse users.
• Use icons that are universally understood and directly relate to expected entry.
• Use leading icons consistently across experiences to help users learn and predict behavior.

Pre-selected options

In general, all comboboxes should appear empty by default. This ensures users have full control over their choices and prevents confusion that a selection has already been made. When possible, leave all options unselected both visually and programatically.

Some browsers require an option to be selected by default. If this occurs, the first option can be used as a placeholder that can’t be selected by the user. For required fields, leaving the placeholder option selected causes an error during submission. For optional fields, no error is shown. This ensures users must make an active choice and can’t accidentally submit the placeholder option.

• Use disabled styling so the placeholder option is visually distinct from the others.
• Ensure placeholder text is clear and helpful to avoid confusing or frustrating the user.
• Ensure placeholder text uses a font color with a 4:5:1 contrast ratio.

Empty state

An empty state occurs when when text entered in the input field doesn’t match the available options within the menu.

• Use clear language to inform users that their input doesn’t match any options, as users may misinterpret an empty state for a loading state and wait for options to appear.

Optional vs. required labels

Always ensure required fields are clearly labeled. While this may seem repetitive, it helps users scan for necessary information and reduces errors. There are two methods for labeling required fields based on your use case. Whichever method you select, use it consistently across your experiences.

Note: Previous VPDS guidance recommended only marking optional fields. Our guidance has been updated to reflect current Nielsen Norman Group recommendations. Learn more about optional vs. required labels in Forms.

When required is implied

Although it’s usually recommended to label required fields, there are cases where it’s implied that the field is required. This is common when there’s a one or two fields fundamental to completing of a task, like the username and password fields on a login screen. In these cases, marking the fields required isn’t necessary but can add additional clarity.

Labeling optional fields

It’s not generally necessary to mark which fields are optional. While doing so can support clarity, it also adds unnecessary visual noise. Whatever you choose, apply the choice consistently to avoid confusion.

Behaviors

Comboboxes can be implemented in a variety of ways to help users easily find and select an option. Reference the guidance below to learn about features of this component and optional behaviors you may implement based on use case.

Note: This section introduces features that aren’t automatically included in the component design and can be implemented in various ways. Product teams can determine how to load and filter data for their use case and should work closely with developers and designers to determine the appropriate level of complexity for their product.

Input and menu functionality

Input fields in combobox components can be implemented with a variety of methods that help users find and select menu options. Product teams should work with their designers and developers to choose the appropriate method for their use case.

Manually expandable menu

Comboboxes can be implemented with menus that display all the selectable options upon expansion. In this method, the user can select an option from the menu without typing in the input field. The input field can optionally be implemented with a search or filter feature. Learn more about these below.

• Include the chevron UI icon button to enable users to expand the menu without typing.
• Implement optional user input with a search or filter behavior to help users find options.

With custom input

Comboboxes can also be implemented to accept custom input, which means users can create a custom option that isn’t available in the menu. This method is particularly helpful for providing flexibility when you can’t predict all potential inputs.

When implementing comboboxes that accept custom input, ensure field accepts flexible formatting to avoid frustrating users with errors. If the system can’t accommodate varying formats, use a pre-defined menu without custom input. To learn more, reference flexible input.

• Pair this functionality with a filtering behavior like autosuggest or autocomplete so users can tell if their input matches a pre-defined option.
• Only show the clear text button when the input field is in focus to prevent users from accidentally clearing their selection.

Input-prompted menu

Comboboxes can be implemented with a menu that only appears after the user enters text in the input field. This method is generally used for complex scenarios where a large number of options are available and can’t all be displayed immediately.

It’s common to implement this type of combobox with autocomplete or autosuggest. To learn more, reference Input.

• Consider including a leading icon to indicate the purpose of the input field.
• Only show the clear text button when the input field is in focus to prevent users from accidentally clearing their input.
• Don’t include a chevron icon, even when the menu is open. Users can collapse the menu by removing focus from the field.

Selection method

Users can select an option using one of the following methods that aim to simplify the process and prevent accidental selections. Selection methods can be combined with search, filter, or autocomplete/autosuggest behaviors to create custom interactions. Consider your desired filtering behavior when implementing a selection method, as filtering behaviors affect how and when focus is placed on a menu option.

Manual selection (preferred)

Select and confirm requires users to confirm their choice before it’s displayed in the field. When the user places focus on an option within the menu, it won’t appear as the selected value in the field until the user selects the option they want by clicking or using the enter key. This is the preferred method as it’s the most accessible and provides users full control over their selection.

• Ensure the selected option isn’t displayed until the user confirms their choice. This prevents accidental selection and gives users the opportunity to change their mind before submission.

Automatic selection

Automatic selection doesn’t require the user to confirm their choice before it’s displayed in the field. When focus is placed on an option in the menu, it automatically appears as the selected value when the user tabs out of the menu or removes focus from the combobox as a whole.

While this method can provide a streamlined selection process, it’s not as accessible as manual selection. Product teams using this method are responsible for ensuring accessibility standards and practices are met.

• Ensure the selected option isn’t displayed until the user confirms their choice. This prevents accidental selection and gives users the opportunity to change their mind before submission.

Scaling and reflow

Scaling and reflow refers to how content behaves as the container size changes, particularly when the container is small and can’t display all content at once. This is common with comboboxes, as they’re often used when screenspace is limited. While the option menu can scale vertically, the input field has a fixed height.

• Scale the option menu vertically until the maximum height is reached.
• Implement a scroll bar when the maximum height is reached to enable users to access all the options.

Content

• Always use sentence case except for proper nouns or acronyms.
• Use plain language and avoid abbreviations or jargon.
• Reference Content for additional guidance on crafting content within apps and experiences.
• Avoid using unnecessary articles like “the” or “an”, unless they’re included in the proper name of a product or service.

Labels

• Limit field labels to three to five words when possible.
• Be consistent when using plural language or “(s)” in field labels. For example, use “Select card type,” “Select card types,” or “Select card type(s)” consistently. If using “(s),” use the asterisk method over “(required)” to keep labels concise.
• Use parallel structure across field labels, using either nouns like “Services” or verbs like “Select a service”. Learn more about parallel structure in Grammar and punctuation.

Option labels

• Limit option labels to three words or fewer unless referencing proper nouns, such as product names.
• Avoid using unnecessary articles like “the” or “an,” unless they’re included in the proper name of a product or service.

Inline messages

• Use full sentences with proper punctuation.
• Limit descriptions to 80 characters or 20 words including spaces.
• Provide useful information such as why a field is required (if not obvious) without being technical.
• Give an example or specific syntax or values for inputs to help avoid errors.

Inline error message

• Use inline error messages to draw attention to errors without causing frustration.
• Provide clear, prescriptive guidance on correcting the error. Avoid redirecting users to another page to fix it.
• Communicate whether the problem can occur again and offer an alternative backup solution in case it does.

Platform considerations

Mobile

On mobile screens, the combobox opens as a full-screen and spans the width of the page. Once users make a selection, the fullscreen view closes automatically and the user is returned to their place in the form.

• Ensure users can exit the fullscreen view by selecting the close button in the top app bar.
• Remove the chevron icon button from the input field when the combobox is in fullscreen view.

Related guidelines