Combobox
A text field that filters a dropdown as you type, so you can search a long list instead of scrolling it.
See it
What it is
A combobox is a text input welded to a filtered list: you type, the options narrow, you pick one, and the picked value goes in the field. It's the pattern behind country pickers, assignee selectors, tag fields, and the @-mention menu in every chat app. Older names for the same thing: typeahead, autocomplete, autosuggest.
Reach for it the moment a plain select gets long enough that scrolling is a chore, roughly ten options and up. Decide two things up front. First, can the user enter a value that isn't in the list? A closed combobox forces a match, an open one accepts free text (and often offers a 'Create this one' row). Second, is filtering local or remote? Remote means debouncing keystrokes, showing a loading state in the list, and dropping responses that arrive out of order, or the list will flash results for a query the user already deleted.
Gotcha: the accessibility contract is fussier than it looks. DOM focus stays in the input the whole time (so typing keeps working) while the visual highlight moves through the options via aria-activedescendant, with aria-expanded and aria-controls on the input and role='option' on the rows. Arrow keys move, Enter selects, Escape closes the list before it clears the field. Rolling this by hand is how you get a 'dropdown' that's invisible to screen readers: use a headless primitive (Radix, Ark, Downshift) unless you enjoy the spec.
Ask AI for it
Build an accessible combobox: a text input with a chevron button that opens a floating listbox of options filtered by what's typed, matched case-insensitively on substring, with the matching characters highlighted. Keyboard: ArrowDown / ArrowUp move the active option and scroll it into view, Enter selects, Escape closes, Tab commits and moves on. Keep DOM focus in the input and track the active option with aria-activedescendant; set role='combobox', aria-expanded, and aria-controls on the input and role='option' with aria-selected on the rows. Show a 'No results' row when nothing matches, and a checkmark on the currently selected option. Position the list with Floating UI so it flips above the input near the viewport bottom.