Combobox Autocomplete
Type to filter, arrow to choose, and screen readers keep up.
IntermediateWeb appUI component10–22hAI-buildable 4/5no setup
An accessible autocomplete built to the ARIA combobox pattern: async options, keyboard navigation, correct role and aria-activedescendant wiring, and multi-select tokens. Almost every hand-rolled autocomplete is inaccessible; building one correctly is a genuinely valuable skill.
UI
Logic
Useful
Hosting · Free forever
Deploys free on GitHub Pages, Cloudflare Pages or Vercel Hobby.
Deploy it and share a link.
Core features · 7
- Typing filters the option list live
- Arrow keys move through options and Enter selects
- Options load asynchronously with a loading state
- Correct combobox roles and aria-activedescendant wiring
- Multi-select mode with removable tokens
- Selecting with the mouse and keyboard both work identically
- No-results and error states are announced, not just displayed
The interesting part
- The ARIA combobox pattern is specific and easy to implement wrongly
- Race conditions when async results arrive out of order
- Token removal by Backspace matching what users expect
Once it works
- Add option grouping with headers
- Add creatable options for values not in the list
- Add virtualisation for very long lists
Suggested stack
reacttypescripttailwind