Selection Card

Applies the Selectable Surface foundation to card and tile compositions, with single, multiple and ring-only options.

Single select · cardChoose one option

Multiple select · cardChoose any combination

Ring only · cardUse when the surrounding instruction already makes selection clear

Single select · tileUse when a short label and visual cue are enough

Multiple select · ring-only tilesEach tile toggles independently without a checkbox

Choose the variant

Start with semantics, then choose the composition and indicator.

1 · Selection

Single when exactly one choice is allowed. Multiple when zero, one or several are allowed.

2 · Composition

Card for a title with supporting detail. Tile for a short label in a compact repeated grid.

3 · Indicator

Radio or Checkbox is the default. Use Ring only when nearby instructions already make selection obvious.