ComboBox
ComboBoxes combine a text input with a dropdown menu, allowing users to either select an option from the list or enter their own value. It is a versatile component that enhance user input flexibility.
Last updated
ComboBoxes combine a text input with a dropdown menu, allowing users to either select an option from the list or enter their own value. It is a versatile component that enhance user input flexibility.
Last updated
A combobox combines the flexibility of a text input with the simplicity of a dropdown, allowing users to either select from a pre-defined list or type their own value.
Use a combobox when users need to select from a list of options but may also need the freedom to input their own custom value.
When a dropdown list contains many options, and searching within the list enhances usability, a combobox is an ideal solution.
Apply a combobox if the list of selectable options may change based on user input or contextual conditions, giving users flexibility to add new options.
In cases where you need to minimize space in forms, a combobox helps by combining a text field and dropdown into a single interactive component.
If it’s essential that users compare all options before selecting, use a radio button or checkbox list, as comboboxes limit the number of visible options.
If the input requires extensive validation or complex formats, a combobox may not provide the necessary structure and could cause confusion.
If there are only a few options, a simple dropdown or radio buttons may be more efficient and clearer than a combobox.
Icon Leading: An optional icon that appears at the start of the combobox input field, indicating the type of content.
Label: Describes the field, guiding users on what to select or input.
Tag: Representing selected items within the combobox field.
Input Field: A text box where users can type to filter options or make a selection. It's the interactive area for text input.
Count: Displays the number of items selected or available for selection.
Icon Trailing: An icon (such as a dropdown arrow) located on the right side of the input field.
Menu Option: The list of selectable items within the expanded menu. Users can scroll or type to search for options.
Small
14
20
8
32
Medium
14
20
8
42
Large
16
24
8
50
Keyboard Navigation: Ensure the combobox is fully accessible via keyboard. Users should be able to navigate through options using the arrow keys and select items with "Enter" or "Space."
Clear Focus Indicators: The focus state should be visibly distinct to assist users relying on keyboard navigation.
Screen Readers: Combobox components should clearly indicate when they are expanded or collapsed. Each option should be announced as users navigate through the list, and any custom value entered by the user should also be vocalized.
Country Selection in a Form: A combobox allows users to either search for their country or type it directly, useful when handling extensive lists like countries or cities.
Product Search in an E-commerce App: Users can type in a product they’re looking for, and the combobox suggests matches from the store’s product catalog.
Adding Participants to an Event: A combobox allows users to select participants from a dropdown or input new participants’ emails if they’re not already in the system.
Searchable Dropdown for Customer Feedback: In a feedback form, users can either choose from common issues or type in a custom comment.
