makeup-listbox-button

Listbox-Button is headless UI widget and does not come bundled with any CSS. This example is receiving its styles from eBay Skin.

This example is receiving its base markup and styles from eBay Skin. A subset of style properties are being customized/themed via Skin's CSS Custom Properties.

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