Component · input.combobox
Combobox
An editable input combined with a listbox of suggested or constrained options.
Informative mappings only. Platform examples below describe possible target primitives. This release does not ship adapters for React, Swift, Android or any other platform.
Anatomy
| Part | Required | Description |
|---|---|---|
label | yes | Visible field label. |
input | yes | Editable text field for filtering or free text. |
trigger | no | Optional button that expands the popup. |
popup | yes | Popup surface hosting the listbox. |
listbox | yes | List of selectable options. |
option | yes | An individual selectable option. |
States
- default
- hover
- focus-visible
- expanded
- collapsed
- disabled
- invalid
Keyboard
- Arrow keys move the active option in the listbox while preserving the editable input
- Enter selects the active option
- Escape collapses the popup without losing input focus unexpectedly
- Printable keys edit the input value
Accessibility
Preserve editable-text behavior while exposing combobox, listbox, and option relationships, including expanded state and the active descendant or focused option. The accessible name comes from the field label. Collapsing the popup must leave the user oriented in the input.
Motion
Popup may fade or slide a short distance; under reduced motion, show or hide the list instantly.
Platform mappings
web
web
ARIA combobox pattern with native input plus listbox; prefer proven design-system comboboxes.
apple
apple
SwiftUI searchable picker or custom field + menu that keeps text editing intact.
android
android
Compose ExposedDropdownMenuBox or equivalent editable dropdown pattern.