Listbox Button

A button that expands to reveal a listbox in a flyout. Read more.

Example 1: Manual Selection

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

Unselected

Selected

Example 2: Automatic Selection

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

Unselected

Selected

Example 3: Listbox with group headers

Groups

Layouts

Groups as Responsive Columns (flat DOM)

Groups as Fixed Columns (nested DOM)

Updated: April 18th, 2025