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
Warm Colors
Red
-
Lorem ipsum dolor sit amet
Orange
-
Lorem ipsum dolor sit amet
Yellow
-
Lorem ipsum dolor sit amet
Brown
-
Lorem ipsum dolor sit amet
Cool Colors
Blue
-
Lorem ipsum dolor sit amet
Green
-
Lorem ipsum dolor sit amet
Violet
-
Lorem ipsum dolor sit amet
Layouts
Responsive Columns (flat DOM)
Warm Colors
Red
-
Lorem ipsum dolor sit amet
Orange
-
Lorem ipsum dolor sit amet
Yellow
-
Lorem ipsum dolor sit amet
Brown
-
Lorem ipsum dolor sit amet
Cool Colors
Blue
-
Lorem ipsum dolor sit amet
Green
-
Lorem ipsum dolor sit amet
Violet
-
Lorem ipsum dolor sit amet
Fixed Columns (nested DOM)
Warm Colors
Red
-
Lorem ipsum dolor sit amet
Orange
-
Lorem ipsum dolor sit amet
Yellow
-
Lorem ipsum dolor sit amet
Brown
-
Lorem ipsum dolor sit amet
Cool Colors
Blue
-
Lorem ipsum dolor sit amet
Green
-
Lorem ipsum dolor sit amet
Violet
-
Lorem ipsum dolor sit amet