Listbox Button

A button that opens a listbox in a flyout.

Screenshots

No screenshot yet.

Introduction

NOTE: we are in the process of restructuring the Autocomplete, Combobox, Listbox and Select patterns. Please bear with us.

The listbox pattern is a JavaScript widget. It is a button that opens a listbox in a flyout.

Because it is not a form control, the button value will not be passed to the server. If you require this behaviour, please consider the select pattern instead.

Do not call a listbox button a "dropdown"! The term "dropdown" is ambiguous and could be confused with a menu, combobox, select or any other kind of overlay that "drops down". If you must, call it a dropdown listbox.

Working Examples

You can take a look at the listbox button pattern in action on our examples site.

You can get a quick idea of the required markup structure by viewing our bones project.

Terminology

widget: the pattern as a whole, comprised of the parts below

button: the button that opens the flyout

flyout: the overlay that contains the listbox

Configuration

See related listbox pattern.

Best Practices

This section is not yet available.

Interaction Design

This section provides interaction design for keyboard, screen reader & pointing devices.

Please also see related listbox pattern for best practices of nested listbox.

Keyboard

With focus on button, pressing SPACEBAR will will toggle expanded state of flyout.

With focus on listbox, pressing ESCAPE key will collapse flyout.

Screen Reader

With virtual cursor on button, screen reader should announce role, state and value.

Pointer

Clicking or tapping button will toggle expanded state of flyout.

Clicking or tapping an option in flyout will update button value and collapse the flyout.

Developer Guide

This section is not yet available.