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