ui / makeup-listbox-button

Listbox-Button is headless UI widget and does not come bundled with any CSS.

Listbox-Button uses makeup-listbox.

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

Manual Selection

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

Unselected

Selected

Variations

Descriptons

Groups

Layouts

Groups as Responsive Columns (flat DOM)

Groups as Fixed Columns (nested DOM)

Floating Label

Floating label, Initially Unselected

Floating label, Initially Selected

Icons

With Icons

With Icons & custom aria-label

With Icons & Text