Combobox
可搜索选择框
Aliases:可以搜索的下拉框输入筛选选项自动补全选择autocomplete
What is it
A text field paired with a list of suggestions. People type to narrow a set, then commit a value with pointer or keyboard. Typed text, the active suggestion and the committed selection are separate states. Provide a clear empty result and a way to clear the field when nothing matches.
Interactive playground
Try it. Make an informed choice.Type a keyword, choose with arrows and Enter, then try no results and clear the selection.
Loading lab…
What to look for
- 01The active descendant must reference an existing option.
- 02Clearing restores options; Escape closes the list.
✓ When to use
- Choose a city, team member or style from a sizable known set.
- Filter while typing while preserving a clear committed value.
✕ When not to use
- Use radios for only two or three choices.
- Use a plain input when there is no suggestion set.
Variants
Editable
可输入筛选
Type to filter suggestions.
Select only
只选不输
Choose a fixed value without free-form input.
Implementation
position: relativeoverflow-y: auto:focus-visibleKeep focus in the input and point aria-activedescendant at the active option. Connect aria-expanded, aria-controls, listbox and option semantics. Support arrows, Enter and Escape, and reset the active index when filtering changes.
Related concepts
A single-line bordered field for collecting text — the basic unit of every form. Placeholder hints the expected format, focus highlights the border to guide the eye, and failed validation switches to an error color with a hint. Prefix and suffix icons or a clear button can live inside, and the value is controlled state.
ComponentsSimilarA collapsed single-line control holding a set of mutually exclusive options; expanding the panel reveals them and the chosen value stays on the trigger. More space-efficient than radios, suited to more than 5 options; the panel can scroll, group or search, and picking one closes it.
ComponentsSimilarA floating search panel summoned with ⌘K / Ctrl+K: type to filter commands, pages or content, navigate with arrow keys, execute with Enter. Popularized by macOS Spotlight; now standard in power-user products.
ComponentsSimilar