Wikimedia Design Style Guide will be archived soon. Visit its improved and enhanced successor:
Codex, Design System for Wikimedia.


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 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.


text input field design properties

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.

See WikimediaUI Figma comboboxes component.


comboboxes field visual design and states


See OOUI's demos section of combobox inputs.