Listbox Button

A button that expands to reveal a listbox in a popover. 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 as Single Column

Groups as Responsive Columns (flat DOM)

Groups as Fixed Columns (nested DOM)

Updated: June 3rd, 2025