Comboboxes
Comboboxes combine a text input with autocomplete and a dropdown button.
Using comboboxes
Through combobox inputs users can input text, numbers, symbols or mixed-format strings (unless specifically restricted) while being offered autocomplete options in a dropdown menu.
Comboboxes should be used when the 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
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 the user has clicked into or interacted with the corresponding field.
States
