Searchable select
A list too long to scroll. Type to narrow it, use the arrow keys to move through what is left, Enter to take it — and the reader is told which option is active as it moves.
Customers
ten here, thousands in a real ledger
- ✓
- Nothing matches that.
Type a few letters — the list narrows as you go.
Accounts
where the code matters as much as the name
- ✓
- Nothing matches that.
Search by code or by name; both match.
Beside a plain select
when the list is short, the native one is better
Three options. A native select opens faster, works offline of any script, and is what the phone's own picker expects.
What it has to get right
- Focus never leaves the input. The highlight moves inside the list while the caret stays where you are typing.
- The reader is told what is highlighted through
aria-activedescendant, which is why the highlight is not simply a hover colour. - Escape closes it without choosing anything, and the field goes back to what it held.
- Nothing matching says so in words, rather than showing an empty box.