Combobox Component
Textbox with quick-entry ability via a list of values.
A combobox serves the exact same purpose as a textbox - allowing text to be input and submitted via a form. The combobox's main additional feature is a listbox of suggestions that will update the textbox with the corresponding value when chosen.
A combobox typically also offers autocomplete behaviour - whereby the list of suggestions is filtered based on the current textbox value (i.e. while the user is typing in the textbox).
A combobox is a combination of textbox and listbox. The textbox value can be constructed via manual text entry as normal, or via selection from the listbox options, or a combination of both.
Terminology
We use the following terminology when discussing this pattern.
- combobox : the pattern as a whole, comprised of the following distinct parts
- textbox : stores and displays the form value
- popover : the overlay that contains a listbox
- listbox : listbox containing options
- option/suggestion : a suggestion inside of the listbox and/or directly after the textbox value
- autocomplete : the autocomplete type (optional)
- filter : the filtering criteria (optional)