Combobox
Dropdown menu that helps users enter text or select items from a list.
Creating access for everyone, everywhere requires attention to accessibility attributes, best practices, and requirements. Find accessibility guidance below.
Note: Components in each code library are implemented differently (especially Flutter). Many of the behaviors and attributes described are already handled for you as part of our components. Product teams are responsible for ensuring their apps meet all current requirements. Some of the information below may not apply to your implementation.
Best practices
Ensure the following best practices are met when implementing this component during development.
Note: Comboboxes are comprised of multiple components. Many of the attributes that comboboxes use are handled by our library components. As with other form components, use
- Consider implementing a “no results found” message similar to the Angular examples.
- Visit Listbox for notes on its roles which include
.
Keyboard controls
Input
Maintain common keyboard shortcuts used for editing text unless uniquely specified. Refer to Input for details.
| Key | Behavior |
|---|---|
| Tab | Moves to next interactive focusable element. |
| Shift + Tab | Moves to previous input field. |
| Space | Opens the menu. |
| ↑ + ↓ | Opens the menu. |
| Esc | Dismisses menu and clears any inline autocomplete while maintaining user-entered input. |
Menu (listbox pop-up)
Reference Listbox for detailed interactions. Focus will loop in a circular direction among the menu items.
| Key | Behavior |
|---|---|
| Enter | Confirms the option in focus as the user’s selection and closes the menu. |
| Tab | Dismisses the menu, moves to next interactive focusable element. |
| ↑ + ↓ | Moves focus between the options in the menu. |
| Esc | Dismisses menu and clears any inline autocomplete while maintaining user-entered input. |