Combobox
ProAn autocomplete input that combines a text field with a filterable dropdown list. As the user types, matching options are shown in a listbox. Follows the WAI-ARIA combobox pattern with full keyboard support and screen reader announcements.
8 variants
Variants
| Variant | Description | When to use |
|---|---|---|
| Default | Text input with a filterable suggestion list that appears on focus or typing. | Use for selecting from large datasets where typing to filter is faster than scrolling — cities, users, products. |
| With Create | Combobox that allows creating a new option when no match is found. | Use when the user should be able to add new items — tags, categories, custom entries. |
| Multi |
Usage Guidelines
Do
Show a loading indicator while fetching remote options.
Don't
Use for fewer than 10 options — use a Select instead.
Do
Highlight the matching text within each option.
Don't
Auto-select the first option on open — let the user make an explicit choice.
Do
Announce the number of results to screen readers via aria-live.
Don't
Clear the input when the dropdown closes if a valid selection was not made.
Code
Design Tokens
Accessibility
- Container uses role="combobox" with aria-expanded, aria-controls, and aria-haspopup="listbox".
- Input uses aria-autocomplete="list" and aria-activedescendant pointing to the focused option.
- Listbox uses role="listbox" with role="option" children.
- Announce result count changes with an aria-live="polite" region (e.g., "5 results available").
- Selected option uses aria-selected="true".