eBay

Listbox

Select a search category

Introduction

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


Working Example

You can take a look at the custom checkbox pattern in action on our examples site.


Best Practices

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.


Interaction Design

Content coming soon.


Developer Guide

HTML gives us a native listbox control that is 100% keyboard and screenreader accessible without any need for JavaScript:

<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 <select> tag under-the-hood (hidden away, but acting as our model), and present a facade widget on top of it (acting as our "view"). The model and view must be kept in sync using JavaScript.

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.

HTML

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.

The Model

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 View

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.

results matching ""

    No results matching ""