Inputs · §10.3

Combobox

A searchable select for long catalogues.

State
Theme
Contrast
Language
Motion
Text size

Code

<Combobox items={tests}><ComboboxInput placeholder="Search the catalogue" /><ComboboxContent><ComboboxList>{…}</ComboboxList></ComboboxContent></Combobox>

Accessibility

  • The input filters as you type; the list is labelled by the field.

Usage

Do

  • Staff filters and forms.

Don't

  • Don't use it for fewer than 8 options.

Platforms

Web
apps/web/components/ui/combobox.tsx, apps/web/components/ui/input-group.tsx
iOS
SwiftUI searchable list
Android
Compose ExposedDropdownMenu with a text field