Radio card

Selectable card options in a vertical radio group with optional badges and trailing content.

Examples

Properties

PropertyAttributeDescriptionType nameTypeDefault
namenameOptional shared name for form submission via the hidden input.stringstring""
valuevalueCurrently selected card value.stringstring""
ariaLabelaria-labelAccessible name when the group is not labelled by a visible heading.stringstring""
ariaLabelledByaria-labelledbyID of the element that labels the group.stringstring""

Slots

NameDescription
default`duo-radio-card` elements.

Usage

Radio card pairs a native radio input with a rich card layout. Wrap options in duo-radio-card-group and give each duo-radio-card the same name and a unique value.

<duo-radio-card-group aria-labelledby="packages-heading">
  <duo-radio-card
    name="package"
    value="basic"
    title="Basic"
    subtitle="Checkado"
    checked
  >
    <duo-badge slot="badges" variant="secondary" label="ID check"></duo-badge>
    <div slot="trailing">
      <duo-price amount="990" currency="SEK"></duo-price>
    </div>
  </duo-radio-card>
</duo-radio-card-group>

Do

  • Label the group with aria-labelledby when a visible heading is present, otherwise aria-label.
  • Use the badges slot for compact included-item labels with duo-badge.
  • Use the trailing slot for price, status, or any right-aligned content.
  • Listen for the change event on duo-radio-card-group when the selected value changes.
  • Use arrow keys to move between options once focus is inside the group.

Don’t

  • Don’t use for multi-select — use checkboxes instead.
  • Don’t use duo-chip for static labels — chips are for combobox selections and dismissible tags.
  • Don’t use for navigable rows without selection — use List group item.
  • Don’t omit name — cards in the same group must share it for native radio behaviour.

Slots

ComponentSlotPurpose
duo-radio-cardtitlePrimary label (overrides title)
duo-radio-cardsubtitleSecondary line (overrides subtitle)
duo-radio-cardbadgesIncluded-item labels (e.g. duo-badge)
duo-radio-cardtrailingTrailing content such as price or status

Events

EventDetailDescription
change{ value: string }Fired on duo-radio-card-group when the selected value changes
  • duo-radio-card-group — vertical stack with role="radiogroup".
  • duo-badge — compact status or count labels.
  • duo-price — formatted monetary amounts for the trailing slot.
  • duo-section — grouped wrapper for package pickers (use variant="raised" for a tinted surface).