CatalystRadio Cardsv0.1.15Ready for Production
A card-style radio group component for presenting mutually exclusive options as visually rich selectable cards with title, optional label, and size variants.
Prefer AI-assisted development?
Deprecated Component
This component is deprecated and should not be used in new projects. Please use the RadioGroup component instead, which provides better accessibility, a simpler API, and improved functionality.
Catalyst RadioCards wraps Radix UI RadioGroup to render each option as a selectable card with a prominent title and optional label — ideal for pricing selectors, donation amounts, or any scenario where a visual card communicates more than a plain radio input.
Installation
npm install @pmi/catalyst-radio-cardsimport { RadioCardsRoot, RadioCardsItem, RadioCardsTitle, RadioCardsLabel } from '@pmi/catalyst-radio-cards';Examples
Default
Label Below Title
Title Only
Sizes
Danger
Disabled
API Reference
RadioCardsRoot
Root container that owns the radio group state and passes size and danger context to all child items.
Prop
Type
RadioCardsItem
Individual selectable card. Renders as a Radix UI RadioGroup.Item with border, padding, and checked-state styles driven by the parent RadioCardsRoot context.
Prop
Type
RadioCardsTitle
Prominent display text inside the card — typically the primary value (e.g. a price). Typography scales with the size set on RadioCardsRoot.
Prop
Type
RadioCardsLabel
Secondary label text inside the card — typically a plan name or descriptor. Always rendered in text-body-sm regardless of card size.
Prop
Type
Accessibility
RadioCards is built on Radix UI RadioGroup. The group is rendered with role="radiogroup", and each card with role="radio" and aria-checked. Radix also provides the keyboard behavior described below.
Keyboard Interactions
| Key | Action |
|---|---|
Tab | Move focus into the group (to the checked card, or the first card if none is checked) |
Shift + Tab | Move focus out of the group to the previous focusable element |
Arrow Right / Arrow Down | Move focus to the next card and select it (wraps to the first card) |
Arrow Left / Arrow Up | Move focus to the previous card and select it (wraps to the last card) |
Space | Select the focused card if it is not already selected |
Choosing the Right Component
| Scenario | Recommended component |
|---|---|
| New feature — mutually exclusive options | RadioGroup |
| Legacy code with card-style radio UI | RadioCards (this page) |
| Binary on/off toggle | Switch |
| Multiple independent selections | Checkbox |
Related
- RadioGroup — recommended replacement with better accessibility
- Radio — deprecated bare radio input
- Checkbox — for multi-select scenarios
- Switch — for binary on/off states
- Label — accessible label for form controls
Quantity Picker
An accessible increment/decrement control built with CVA variants, four size options, danger state, and full keyboard support.
SubText
A compact helper-text element for displaying secondary copy beneath form controls, with built-in size variants and danger state for validation messaging.