Toggles — Radio cards

Three selectable cards combine a radio indicator, short plan details and a price. Use them when mutually exclusive choices need more explanation than a segmented control can hold.

ReactHTML

1440 × 480

Open in new tab

Component.tsx43 lines

export default function TogglesRadioCards() {
  return (
    <fieldset className="w-72 text-neutral-900 sm:w-[36rem]">
      <legend className="text-sm font-semibold">Plan selection</legend>
      <div className="mt-3 grid gap-3 sm:grid-cols-3">
        <label className="group relative flex cursor-pointer items-center gap-3 rounded-lg border border-neutral-300 bg-white p-4 transition-colors has-checked:border-neutral-900 has-checked:ring-1 has-checked:ring-neutral-900 has-enabled:hover:border-neutral-400 has-checked:has-enabled:hover:border-neutral-900 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 sm:flex-col sm:items-start sm:gap-0 forced-colors:border-[ButtonText] forced-colors:has-checked:border-[Highlight]">
          <input type="radio" name="toggles-radio-cards-plan" value="1" aria-describedby="toggles-radio-cards-description-1" defaultChecked className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-300 group-has-checked:border-neutral-900 forced-colors:border-[ButtonText]">
            <span className="size-1.5 rounded-full bg-neutral-900 opacity-0 group-has-checked:opacity-100 forced-colors:bg-[CanvasText]" />
          </span>
          <span className="min-w-0 sm:mt-3">
            <span className="block text-sm font-semibold">Plan name</span>
            <span id="toggles-radio-cards-description-1" className="mt-1 block text-sm text-neutral-500">Description of plan scope</span>
          </span>
          <span className="ml-auto text-base font-semibold tabular-nums sm:mt-4 sm:ml-0">$29</span>
        </label>
        <label className="group relative flex cursor-pointer items-center gap-3 rounded-lg border border-neutral-300 bg-white p-4 transition-colors has-checked:border-neutral-900 has-checked:ring-1 has-checked:ring-neutral-900 has-enabled:hover:border-neutral-400 has-checked:has-enabled:hover:border-neutral-900 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 sm:flex-col sm:items-start sm:gap-0 forced-colors:border-[ButtonText] forced-colors:has-checked:border-[Highlight]">
          <input type="radio" name="toggles-radio-cards-plan" value="2" aria-describedby="toggles-radio-cards-description-2" className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-300 group-has-checked:border-neutral-900 forced-colors:border-[ButtonText]">
            <span className="size-1.5 rounded-full bg-neutral-900 opacity-0 group-has-checked:opacity-100 forced-colors:bg-[CanvasText]" />
          </span>
          <span className="min-w-0 sm:mt-3">
            <span className="block text-sm font-semibold">Plan label</span>
            <span id="toggles-radio-cards-description-2" className="mt-1 block text-sm text-neutral-500">Summary of included access</span>
          </span>
          <span className="ml-auto text-base font-semibold tabular-nums sm:mt-4 sm:ml-0">$59</span>
        </label>
        <label className="group relative flex cursor-pointer items-center gap-3 rounded-lg border border-neutral-300 bg-white p-4 transition-colors has-checked:border-neutral-900 has-checked:ring-1 has-checked:ring-neutral-900 has-enabled:hover:border-neutral-400 has-checked:has-enabled:hover:border-neutral-900 has-disabled:cursor-not-allowed has-disabled:opacity-50 has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-neutral-900 sm:flex-col sm:items-start sm:gap-0 forced-colors:border-[ButtonText] forced-colors:has-checked:border-[Highlight]">
          <input type="radio" name="toggles-radio-cards-plan" value="3" aria-describedby="toggles-radio-cards-description-3" disabled className="sr-only focus-visible:outline-hidden" />
          <span aria-hidden="true" className="flex size-4 shrink-0 items-center justify-center rounded-full border border-neutral-300 group-has-checked:border-neutral-900 forced-colors:border-[ButtonText]">
            <span className="size-1.5 rounded-full bg-neutral-900 opacity-0 group-has-checked:opacity-100 forced-colors:bg-[CanvasText]" />
          </span>
          <span className="min-w-0 sm:mt-3">
            <span className="block text-sm font-semibold">Plan title</span>
            <span id="toggles-radio-cards-description-3" className="mt-1 block text-sm text-neutral-500">Details of available options</span>
          </span>
          <span className="ml-auto text-base font-semibold tabular-nums sm:mt-4 sm:ml-0">$99</span>
        </label>
      </div>
    </fieldset>
  )
}

Pattern notes

When to use: Use when one option must be chosen and short copy plus a figure aids comparison. Pick toggles-segmented-control for short labels or toggles-checkbox-tile-grid for multiple selections. Variations: replace prices with durations, remove the disabled card, or put a short availability hint beneath the figure. Descriptions stay concise in both orientations.
Hierarchy: Read Plan selection, then each 14px semibold title, 14px neutral-500 description and 16px semibold tabular price. Titles use two words, descriptions up to five words and figures up to four characters. Each input is a native radio in one named group with aria-describedby pointing to its description. The first choice starts selected and the third is unavailable.
Responsive: Below 640px all three cards are rows in a 288px-wide vertical stack, about 290px tall including the legend. From 640px the fieldset is 576px wide and cards become columns with stacked content, 198px tall. Copy can wrap while the indicator and figure keep their size.
Layout: A 288px-wide (w-72) fieldset widens to 576px (sm:w-[36rem]). A 14px semibold legend precedes three cards by 12px. Cards use rounded-lg, a 1px neutral-300 border, white fill and p-4. Below 640px cards stack with gap-3; each is a flex row with 12px gaps, a 16px bordered radio indicator, a flexible title/description column and a right-aligned figure. From 640px cards form three equal grid columns and stack contents: indicator, copy after 12px and figure after 16px. The selected indicator has a 6px dot.
States: Enabled hover changes card borders to neutral-400; selected cards retain a neutral-900 border with a 1px neutral-900 ring. A checked radio reveals its inner dot with opacity through group-has-checked. Keyboard focus is a 2px neutral-900 label outline offset 2px, driven by has-[:focus-visible]; hidden inputs use focus-visible:outline-hidden with a transparent 2px outline in forced-colors mode. The third card is native disabled, 50% opaque and uses a not-allowed cursor. Forced colors use ButtonText borders, a Highlight selected border and CanvasText indicator dots.

Desktop wireframe

┌───────────────────────────────────────────────────────┐
│ Plan selection                                        │
│ ┌───────────────┐ ┌───────────────┐ ┌───────────────┐ │
│ │ (o)           │ │ ( )           │ │ ( ) disabled  │ │
│ │ Plan name     │ │ Plan label    │ │ Plan title    │ │
│ │ Brief details │ │ Scope details │ │ Access info   │ │
│ │ $29           │ │ $59           │ │ $99           │ │
│ └───────────────┘ └───────────────┘ └───────────────┘ │
└───────────────────────────────────────────────────────┘

View all

Toggles — Checkbox group with nested options
Layout tags: stacked,form,compact
Toggles — Checkbox tile grid
Layout tags: grid,form,compact
Toggles — Checklist rows with descriptions
Layout tags: list,form,compact

Toggles — Radio cards

Pattern notes

More in Toggles

Toggles — Checkbox group with nested options

Toggles — Checkbox tile grid

Toggles — Checklist rows with descriptions