<selectlist>was introduced. This element builds on the foundation of the
<select>but provides greater flexibility. The
<selectlist>lets developers create a button-triggered dropdown with customizable appearance and behavior. Paired with
<listbox>, and inclusive of
<optgroup>, it offers a modern, adaptable, yet accessible web control.
Right now, many websites have their own type of ‘combobox’, but they’re all a bit different. We often see a mix of
<input> fields and
<datalist> elements trying to do the job, but it’s not quite perfect. By creating a standard
<combobox>, we’re aiming to simplify things.
Further highlighting the need for such a solution, a recent Twitter poll run by the Open UI Community Group underscored the widespread demand for a standardized
This proposal for
<combobox> builds upon the strengths of
<listbox>. It aims to offer a control that is versatile for developers, intuitive for users, and, above all, accessible to all.
By standardizing such elements, we hope to bridge the gap between design demands and the need for performant, reliable, and accessible web controls.
This document aims to provide a complete view of combo-box utilisation across the web to inform a potential proposal within Open UI. The goal of this document is to propose a very basic anatomy to simplify the initial shipment of
<combobox> (or some other name) in the web platform. It will heavily build upon
selectlist but provide a better accessible and extensible solution than that of an
input bound with
This document will not be attempting some of the complex scenarios found across the web that leverage various ways in which to represent multi-selected options. Additionally, it does not intend to cover the addition of options that are not available in a
<listbox>. It will not cover multi-select but will leverage the resolutions defined by
A good analogy for what this document will result in looking like is the Tabs research document.
<combobox> <input type=selectlist> <listbox> <option>One</option> <option>Two</option> </listbox> </combobox>
inputto be supported by invokertarget, see issue #839 ?
<combobox>: The root container that encapsulates the entire
comboboxstructure. It provides context for the interaction between the
<input type=selectlist>: This is where the user can type input or view the selected option. It acts as the trigger to display the listbox.
<listbox>: The wrapper that contains the
<optgroup>(s). If this part was not provided by the author, then
<selectlist>will automatically create one.
<option>: Represents an individual selectable item within the
<optgroup>(Optional): A container to group related options together.
<legend>: To label the group.
<option>: The options within this group.
<optgroup>): Provides a label or title for a group of options within the
<selectlist> default behavior, the
<combobox> doesn’t need much to get started. Here’s how you can set it up with the basics:
<combobox> <option>Option 1</option> <option>Option 2</option> <option>Option 3</option> </combobox>
When an author uses it like this, the combobox creates the parts they need: an input to drop down the list, a place showing your selected option, and the
To showcase the selected option within a
combobox, you can include a
<selectedoption> element. This allows you to present the chosen value separately from the
<combobox> <input type="selectlist" placeholder="Select or type an item..."> <selectedoption></selectedoption> <listbox> <option>Apple</option> <option>Banana</option> <!-- Group of options with a legend --> <optgroup> <legend>Citrus Fruits</legend> <option>Orange</option> <option>Lemon</option> </optgroup> <!-- Another group of options with a legend --> <optgroup> <legend>Berries</legend> <option>Strawberry</option> <option>Blueberry</option> </optgroup> </listbox> </combobox>
filterattributeSection titled Introducing%20filter%20attribute
filter bool attribute enhances the
<combobox> by dynamically narrowing down choices to match user input, making selection faster and more intuitive.
<combobox filter> <input type="selectlist" placeholder="Select fruit"> <listbox> <option>Apple</option> <option>Apricot</option> <option>Banana</option> <!-- ... --> </listbox> </combobox>
Here’s how the
filter attribute simplifies finding and selecting options in a
For discussion and suggestions on the naming of the
filter attribute, please see Issue #932.
searchattributeSection titled Introducing%20search%20attribute
search attribute adds smart search features to
<combobox>. It lets users find options in different ways:
<combobox search> <input type="selectlist" placeholder="Select fruit"> <listbox> <option>Apple</option> <option>Apricot</option> <option>Banana</option> <!-- ... --> </listbox> </combobox>
Join the conversation on the naming and values of the
search attribute in Issue #931.
multipleattributeSection titled Future%3A%20Introduction%20of%20multiple%20attribute
multiple attribute will be specified in detail in a forthcoming update, in sync with the
<selectlist> element’s multi-selection capabilities.
Details regarding keyboard interaction for the combobox will follow the W3C ARIA Authoring Practices for combobox patterns. For further development and discussions, please see the filed issue.
<combobox>Section titled Explored%20Anatomy%20Options%20for%20%3Ccombobox%3E
<input type="text" list="browsers" /> <datalist id="browsers"> <option>firefox</option> <option>Chrome</option> </datalist>
<datalist>approach falls short.
<datalist>, the appearance and behavior can be inconsistent across different browsers.
<selectlist combobox> <input type=selectlist> <listbox> <option>One</option> <option>Two</option> </listbox> </selectlist>
combobox) to modify the behavior of