makeup-listbox

Listbox 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.

The listbox class is consumed by the following modules: listbox-button, combobox.


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

Red
Blue
Yellow
Green

Selected

Red
Blue
Yellow
Green

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

Variations

Icons

AMEX
VISA
Master Card

Descriptions

Red - Lorem ipsum dolor sit amet
Blue - Lorem ipsum dolor sit amet
Yellow - Lorem ipsum dolor sit amet
Green - Lorem ipsum dolor sit amet

Groups

Red Lorem ipsum dolor sit amet
Orange Lorem ipsum dolor sit amet
Yellow 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

Layouts

Responsive Columns (flat DOM)

Red Lorem ipsum dolor sit amet
Orange Lorem ipsum dolor sit amet
Yellow 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
Yellow 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