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

Red
Blue
Yellow
Green

Selected

Red
Blue
Yellow
Green

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

Red
Blue
Yellow
Green

Selected

Red
Blue
Yellow
Green

Example 3: Groups

Red
Orange
Brown
Blue
Green
Violet

Layouts

Responsive Columns (flat DOM)

Red Lorem ipsum dolor sit amet
Orange Lorem ipsum dolor sit amet
Brown Lorem ipsum dolor sit amet
Blue Lorem ipsum dolor sit amet
Green Lorem ipsum dolor sit amet
Violet Lorem ipsum dolor sit amet

Fixed Columns (nested DOM)

Red Lorem ipsum dolor sit amet
Orange Lorem ipsum dolor sit amet
Brown Lorem ipsum dolor sit amet
Blue Lorem ipsum dolor sit amet
Green Lorem ipsum dolor sit amet
Violet Lorem ipsum dolor sit amet

Updated: April 18th, 2025