Surface

Card.Select

View in Figma

An elevated selection card that pairs a leading visual slot with a title, optional description, and an optional badge. The card communicates its selection state through a focused border stroke and a filled radio indicator.

Overview

An elevated selection card that pairs a leading visual slot with a title, optional description, and an optional badge. The card communicates its selection state through a focused border stroke and a filled radio indicator.

Label.Title
Label.DescriptionLabel Text

Anatomy

CardSelect
Label.Title
Label.DescriptionLabel Text
  1. 1Container  required
  2. 2Root  required
  3. 3Visual  instance swap
  4. 4Container.Content  required
  5. 5Container.Header  required
  6. 6Label.Title  required
  7. 7Radio  required  instance swap
  8. 8Label.Description
  9. 9Badge  instance swap

Measurements

Label.Title
Label.DescriptionLabel Text
Height, padding, gaps, and radius, measured live from the rendered component

Specs

Values resolved live from the token spine. Token names follow the active platform; each links to its page.

Container
Corner radius
radiusMd
12pt
Padding (all sides)
spacingPaddingXl
16pt
Fill (both states)
colorBackgroundElevatedPrimary
#FFFFFF
Stroke (isSelected=true)
colorBorderFocused
#4B56C7
Stroke weight (isSelected=true, 1.5pt outside)
strokeLg
1.5pt
Root
Gap between Visual slot and Container.Content
spacingGapPositiveXl
12pt
Container.Header
Label.Title text fill
colorContentPrimary
#0C1828
Radio
Radio ring stroke (isSelected=false)
colorBorderSecondary
#D3D5D8
Radio disc fill (isSelected=true)
colorContentAccent
#4B56C7
Container.Content
Gap between Label.Title, Label.Description, and Badge
spacingGapPositiveXs
4pt
Label.Description text fill
colorContentSecondary
#6D747E

Properties

The component’s Figma API, the properties you set on an instance. Useful to designers in Figma and to engineers mapping it to code props.

PropertyTypeValues
isSelectedbooleanfalse
hasBadgebooleantrue
hasLabelDescriptionbooleantrue
labelTitletextLabel.Title
labelDescriptiontextLabel.Description
Visualslot

Accessibility

Ensure a minimum 44 by 44pt tap target for any interactive instance, adding surrounding padding when the component itself is shorter. Keep text concise, and never rely on color alone to convey meaning; pair it with a label or an icon so the message survives for color-blind and low-vision users.

Reference: Apple Human Interface Guidelines and WCAG 2.5.5 Target Size.