- Guidelines
- React API Reference
- Blazor API Reference
Comboboxes combine text input with dropdown selection, allowing users to either type a value directly or select from a filtered list of options. They are powerful controls for efficient data entry when working with large option sets.
Guidance
| Aspect | Best Practice |
|---|---|
| Usage | Use comboboxes when users need to select from a large list of options or when allowing both selection and free text entry. |
| Content | Provide clear, concise option labels. Use consistent formatting for options. Include helpful placeholder text in the input field. |
| Behavior | Filter options as users type. Allow keyboard navigation. Provide clear visual feedback for selection and focus states. |
| States | Clearly indicate focus, hover, selected, disabled, and error states. Show loading state when options are being fetched asynchronously. |
| Feedback | Provide immediate visual feedback when filtering options. Clearly indicate when no matching options are found. |
| Examples | Country selection, product lookup, user search, or any scenario with numerous options that benefit from filtering. |
Best Practices
- Intelligent Filtering: Implement filtering that searches across relevant fields, not just by the beginning of the string.
- Keyboard Navigation: Ensure users can navigate and select options using arrow keys, Enter, and Escape.
- Manageable Option Lists: Even with filtering, avoid overwhelmingly long lists by chunking or categorizing options when possible.
- Clear Input Status: Provide visual indicators for valid/invalid input and selection state.
- Accessibility Support: Ensure proper ARIA attributes for the input, popup, and options to support screen readers.
Do’s and Don’ts
Do
- Provide clear placeholder text to indicate the expected input. * Show helpful feedback when no matches are found. * Allow keyboard navigation through options. * Maintain consistent formatting for all options.
Don't
- Overload the dropdown with too many unfiltered options. * Hide the dropdown when there are no matches (show a “no results” message instead). * Use for very small option sets (use select or radio buttons instead). * Auto-select options without explicit user confirmation.
Additional Guidance
- Psychological Impact:
- Reduced Cognitive Load: Filtering helps users focus on relevant options rather than scanning a complete list.
- Efficiency: Direct text input can be faster than scrolling for users who know what they’re looking for.
- Recognition vs. Recall: Comboboxes balance the benefits of recognition (selecting from visible options) and recall (typing a known value).