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
Unselected, Floating label
Red
Blue
Yellow
Green
Automatic Selection
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
Unselected, Floating label
Red
Blue
Yellow
Green
Unselected - with descripton
Red
.More information about Red
Blue
.More information about Blue
Yellow
.More information about Yellow
Green
.More information about Green
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