Listbox

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

Example 1: Automatic Selection (default)

ARROW keys move the active descendant and automatically updated the selected state. This behaviour is similar to a radio button group.

Unselected

Selected

Example 2: Manual Selection

ARROW keys move the active descendant. SPACEBAR key is required to manually change the selected state.

Unselected

Selected

Variations

The following variations demonstrate accessible descriptions, groups and columns.

Descriptions

Groups

Groups in Responsive Columns (flat DOM)

Groups in Fixed Columns (nested DOM)

Updated: June 3rd, 2025