Components

Comboboxes

Comboboxes combine a text input with autocomplete and a dropdown button.

text input field

Using comboboxes

Through combobox inputs users can input text, numbers, symbols or mixed-format strings (unless specifically restricted) while being offered auto complete options in a dropdown menu.

Comboboxes should be used when a user’s answer to a prompt can not easily be predicted, but offers a number of pre-defined input values as options, for example common responses, to ease filling out the input with useful values.

Designing

text input field design properties

Label
Combobox labels communicate what input is requested in the text box. Labels are obligatory for input fields and should only be visibly hidden, but still accessible for screen readers in exceptional cases.

Placeholder text (optional)
Placeholder text provides an example of what type of information is being requested in the input box. Placeholder text should further illustrate and support the combobox input label, however they should never be the only input description. Use Base30 for it.

Icon (optional)
Icons may be added to simple identification of specific combobox inputs.

Inline error messages and form validation (optional)
When possible, place messages inline with where the error occurred and explain to users what caused the error and, or how it can be fixed. Utilize appropriate colors for different message types (Green50 for successful or Red50 for erroneous). Inline messages should only be shown after a user has clicked into or interacted with the corresponding field.

States

comboboxes field visual design and states

Coding

See OOUI's demos section of combobox inputs.