Comboboxes

A combobox is a user interface control that merges a text input with a list of selectable items. It lets the user type a value directly or choose one from a dropdown. The current selection is shown in the text field, and activating the control reveals the list.

Editable vs non editable: An editable combobox permits arbitrary text input, while a non editable one (often called a drop-down) restricts input to the available items and may filter the list as the user types.

Typical interactions include clicking or tapping to open the list, navigating with the keyboard, and selecting an item with the keyboard or mouse. Some implementations provide type-ahead or auto-complete that narrows options as the user types.

Accessibility and design: Accessible comboboxes expose appropriate roles and states, such as ARIA role combobox or platform equivalents, with aria-expanded and aria-controls to indicate the list. Labels should be programmatically associated. The control should be keyboard navigable, and the list should be announced by assistive technologies. Visual design should clearly indicate focus and provide sufficient contrast.

Implementation notes: In web contexts, native select elements provide non editable behavior, while inputs with a dropdown or datalist support editable use. Many UI toolkits implement custom combobox widgets for richer features, including long lists, filtering, and virtualization. When choosing a design, consider platform conventions, input emphasis, and the need for validation against a defined item set.