Listbox Component

Allows selection of one or more items from a list of options.

The listbox pattern is a JavaScript widget. It allows _selection_ of one or more items from a list of options. Because it is not a form control, the value will not be passed to the server without the help of some client-side JavaScript. A listbox can be self-contained, or be controlled by another widget (e.g. in a [combobox](combobox) pattern, the textbox _controls_ the listbox).

**autoSelect:** a listbox with auto select will update its checked state automatically as a user navigates with arrow keys (similar to a radio button group). - **multiSelect**: a listbox with multiSelect allows more than one option to be selected - **owner**: specify the focusable element that will own and control the listbox programmatically (e.g. a [combobox](combobox)).

A listbox is intended for use as a custom, non-form based implementation of the native HTML select element.

Terminology

We use the following terminology when discussing this pattern.

  • widget : the pattern as a whole, comprised of the parts below
  • listbox : contains a list of options
  • option : each option available for selection
  • checked : state of each option (checked or unchecked)