The listbox pattern is a form control. Also known as a "select", as it allows selection of one or more items from a list of options.
Like all form controls, the value (or values) make up the form data that is passed to the server. If you require similar behaviour, but without the need for form data, please consider the menu pattern instead.
Do not call a listbox a "dropdown"! The term "dropdown" is ambiguous and could be confused with a menu, combobox or any other kind of overlay that "drops down".
You can take a look at the custom checkbox pattern in action on our examples site.
Listbox must belong inside of a form element, and that form element must have a submit button.
Listbox must support form-autofill behaviour of browser.
Selecting an option must not submit the form. It should only set the option state to selected.
Listbox should not be set to multi-select. Consider using checkboxes instead.
Content coming soon.
<label for="car">Choose a car</label> <select id="car" name="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
However, whilst the native HTML control can be styled to some extent in it's collapsed state, the expanded overlay state cannot.
This conundrum is the source of many a broken listbox on the web, as poorly implemented "custom" solutions are rife. And with good reason, it's not at all a simple task, with many pitfalls.
Pitfall Number 1
Like all form controls, a listbox must support the autofill behaviour of the browser (see best practices above).
The only way to achieve this is to use a real
Pitfall Number 2
Perhaps a deeper rooted issue is that a custom styled listbox does not breed familiarity with users. Whilst not pretty, the native listbox is utilitarian; users find it both practical and familiar.
Despite the reservations mentioned above, we will guide you through an accessible custom listbox implementation.
Because of the issue described in pitfall 1 above, the only valid approach is progressive enhancement.
Let's go back to the
<select> tag markup we showed previously.
<select id="car" name="car"> <option value="volvo">Volvo</option> <option value="saab">Saab</option> <option value="opel">Opel</option> <option value="audi">Audi</option> </select>
This will be our model. It will be this element that gets updated when the browser autofills the form (i.e. one of the
<option> tags will receive the 'selected' property).
The model will be hidden from view (explained in the CSS section). We will create a new view using an ARIA listbox and options. Because we are no longer using a select tag, this markup allows us much greater flexibility in terms of CSS styling.
<button aria-controls="listbox1" type="button">Volvo</button> <ul id="listbox1" role="listbox"> <li role="option">Volvo</li> <li role="option">Saab</li> <li role="option">Opel</li> <li role="option">Audi</li> </ul>
Content coming soon.