Selection Card Group

Selection Cards provide visually enhanced selection options, capturing user attention.

What the component handles

  • Proper checkbox/radio button semantics for each selection card
  • Keyboard navigation between cards using Tab and arrow keys
  • Focus indicators on active cards
  • Proper labeling and descriptions for screen readers

Color contrast

Since the Selection Card’s border is not necessary to determine the component’s hit area, there is no contrast requirement beyond the 4.5:1 text and 3:1 icon contrast, which is ensured.