Radio groups collect exactly one choice as selectable cards, 6 ready-made variants for options that carry descriptions, prices, people, or logos, built on React Aria’s RadioGroup.
Radio groups collect exactly one choice as selectable cards, 6 ready-made variants for options that carry descriptions, prices, people, or logos, built on React Aria’s RadioGroup.
Change the props and copy the result: the snippet carries the variant’s full items array with its imports, so it compiles as pasted. The breakpoint select is the demo’s own and never reaches the snippet; mobile renders inside a real 375px viewport frame, since the kit’s mobile treatments are viewport media queries.
One barrel, six variants, one item-driven surface: each export takes an items array and renders one selectable card per item over React Aria’s RadioGroup semantics.
| Component | Description | Import from |
|---|---|---|
| RadioGroups (barrel) | One namespace re-exporting the six variants under short names. Import it whole and pick with dot access. | @/components/base/radio-groups/radio-groups |
| RadioGroups.RadioButton | The plainest card: title, secondary detail, and description behind the familiar radio circle. | @/components/base/radio-groups/radio-groups |
| RadioGroups.Checkbox | The same card with a rounded-square check glyph. The semantics stay radio; only the glyph changes. | @/components/base/radio-groups/radio-groups |
| RadioGroups.IconSimple | A featured icon leads each card; the check control moves to the right edge. | @/components/base/radio-groups/radio-groups |
| RadioGroups.IconCard | A two-part card with a display-size price and a badge slot; the only variant with either. | @/components/base/radio-groups/radio-groups |
| RadioGroups.Avatar | A person per card, keyed by id rather than value: assignees, approvers, accounts. | @/components/base/radio-groups/radio-groups |
| RadioGroups.PaymentIcon | A payment method with its brand logo, plus built-in Set as default and Edit link buttons. | @/components/base/radio-groups/radio-groups |
The 6 card-style groups from the radio-groups barrel, all live, matching the Figma sheet’s Type axis. Each takes an items array and renders one selectable card per item: a 1px border at rest, a 2px brand ring when selected. Five of the 6 use the rounded-square check glyph as their control; only the RadioButton variant draws the plain radios’ circle.
A check glyph with radio semantics
CheckboxBase, the checkbox family’s visual, while the underlying input stays a native radio: exactly one card holds, and assistive tech announces radios. That pairing is the kit’s and the Figma sheet’s, recorded here so nobody patches it away as a bug.Every treatment below is forced through real props: defaultValue for selected and each item’s own disabled flag. Hover and focus have no prop and no exported style object to re-apply, so they are not forced here.
No hover, and no forceable focus