Design System
Combobox Design Patterns
A reference for building accessible, keyboard-navigable combobox components without external UI libraries.
Anatomy
1Input field with typeahead filtering
2Dropdown listbox (ul with role="listbox")
3Highlighted option via aria-activedescendant
4Empty state when no results match
Keyboard Contract
| Key | Behavior |
|---|---|
| ArrowDown | Move highlight down, wrap to top |
| ArrowUp | Move highlight up, wrap to bottom |
| Enter | Select highlighted option, close list |
| Escape | Close list, restore input value |
| Tab | Select highlighted, close, move focus |
ARIA Attributes
- role="combobox" on input wrapper
- aria-expanded toggled on open/close
- aria-activedescendant points to highlighted option id
- role="option" on each list item
- aria-selected on the currently highlighted option
Visual States
Closed
Select an option...
Open with results
Rea
React
ReasonML
ReScript