Listbox

Allows selection of one or more items from a list of options. 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: Groups

Layouts

Responsive Columns (flat DOM)

Fixed Columns (nested DOM)

Updated: April 18th, 2025