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
Descriptons
Red
.More information about Red
Blue
.More information about Blue
Yellow
.More information about Yellow
Green
.More information about Green
Groups
Warm Colors
Red
-
Lorem ipsum dolor sit amet
Orange
.
Lorem ipsum dolor sit amet
Yellow
-
Lorem ipsum dolor sit amet
Cool Colors
Violet
.
Lorem ipsum dolor sit amet
Blue
-
Lorem ipsum dolor sit amet
Green
.
Lorem ipsum dolor sit amet
Layouts
Groups as 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
Violet
.
Lorem ipsum dolor sit amet
Blue
-
Lorem ipsum dolor sit amet
Green
.
Lorem ipsum dolor sit amet
Groups as 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
Violet
.
Lorem ipsum dolor sit amet
Blue
-
Lorem ipsum dolor sit amet
Green
.
Lorem ipsum dolor sit amet
Floating Label
Floating label, Initially Unselected
Red
Blue
Yellow
Green
Floating label, Initially Selected
Red
Blue
Yellow
Green
Icons
With Icons
AMEX
VISA
Mastercard
With Icons & custom aria-label
AMEX
Extra text
VISA
Extra text
Mastercard
Extra text
With Icons & Text
AMEX
VISA
Mastercard