RadioCardGroup
Forms
Conditionally-interactive
Introduction
An option-selector control presented as a rich group of selectable cards. Primarily used for highlighting choices that carry higher visual priority, detailed descriptive labels, or secondary indicators—such as pricing subscription tiers, billing intervals, shipping methods, and package configurations.
Usage
These examples illustrate how content editors bind and structure interactive radio card groups.
1. Standard Plan Tier Selector
A typical pricing plan layout with multiple rich cards. Ideal for subscription flows, onboarding paths, or product tier pickers.
{
"type": "radioCardGroup",
"label": "Hosting Plan",
"defaultValue": "pro",
"interactive": true,
"items": [
{ "label": "Hobby — $0/month", "value": "hobby" },
{ "label": "Pro — $20/month", "value": "pro" },
{ "label": "Enterprise — Custom", "value": "enterprise" }
]
}
Hosting Plan
2. Subtle Billing Interval Toggle (Subtle Variant)
Demonstrates a smaller, less prominent billing interval card selection rendered with a custom visual subtle variant.
{
"type": "radioCardGroup",
"label": "Billing Frequency",
"defaultValue": "monthly",
"variant": "subtle",
"interactive": true,
"items": [
{ "label": "Monthly Billing", "value": "monthly" },
{ "label": "Yearly Billing (Save 20%)", "value": "yearly" }
]
}
Billing Frequency
3. Accent Themed Option Picker with Disabled Card
Shows an accented color theme (purple) alongside a deactivated or restricted choice, clearly communicating unavailable tier selections.
{
"type": "radioCardGroup",
"label": "Select Priority Server",
"colorPalette": "purple",
"defaultValue": "us-east",
"interactive": true,
"items": [
{ "label": "US East (N. Virginia)", "value": "us-east" },
{ "label": "EU West (Frankfurt)", "value": "eu-west", "disabled": true },
{ "label": "AP East (Tokyo)", "value": "ap-east" }
]
}
Select Priority Server
Props
| Property | CMS Field Type | Default | Description / Supported Options |
|---|---|---|---|
Label Text (label) | string | - | Descriptive heading positioned immediately above the set of radio cards. |
Default Value (defaultValue) | string | - | The value of the option card that starts selected initially (uncontrolled). |
Items List (items) | list | - | Array of options cards containing label (text), value (ID), and optional disabled toggle. |
Visual Variant (variant) | select | "outline" | Theme style applied to background track, borders, and selected active indicator. • Options: "outline", "subtle", "surface", "solid". |
Color Theme (colorPalette) | select | "blue" | Visual theme applied to highlight active checked states. • Options: blue, green, red, purple, orange, amber, cyan, slate, gray. |
Size Scale (size) | select | "md" | Controls overall spacing, margin, and font scale. • Options: "md". |
Form Name (name) | string | - | Standard HTML name attribute used to bundle native values during form submissions. |
Disabled (disabled) | boolean | false | When checked, deactivates every card, preventing selections. |
Force Interactive (interactive) | boolean | true | Hydrates the radio cards as a client-side interactive island to instantly animate sliding triggers on click. |
Developer Notes & Accessibility
- Hydration Island: While RadioCardGroup can render static HTML safely on load, configuring dynamic options, sliding indicator lines, or custom change hooks will initiate hydration as an interactive island on client machines.
- WAI-ARIA Compliance: The component maps fully to the accessibility specification. The parent container behaves as a
role="radiogroup"while individual cards act as interactive options (role="radio",aria-checked,aria-disabled). Standard keyboard arrows (Up, Down, Left, Right) automatically cycle focus and selections. - Form Integration: It outputs native, visually-hidden
<input type="radio">components associated with each option card. This ensures standard HTTP POST form submissions accurately capture selected card values without auxiliary JS synchronization.