Form
Radio Cards
Card-style single-select. Each card highlights when selected, ideal for plan pickers.
Install
pnpm add @codefast/ui
Import path
@codefast/ui/radio-cards
Examples
Plan picker
A controlled single-select with a highlighted card and a live readout.
Current plan: Pro
Billing interval
Lay cards out in a grid; mix in a Badge to flag the better deal.
Icon cards
Compact cards with an icon per option.
Anatomy
How the parts compose. Copy this skeleton and fill in the slots.
import { RadioCards, RadioCardsItem } from "@codefast/ui/radio-cards";
<RadioCards value={v} onValueChange={setV}>
<RadioCardsItem value="a">…</RadioCardsItem>
<RadioCardsItem value="b">…</RadioCardsItem>
</RadioCards>
API reference
Props for each part of the component. All native element props are also forwarded.
RadioCards
Single-select group. Lay out children with grid/flex classes.
| Prop | Type | Default | Description |
|---|---|---|---|
| value / onValueChange | string / (value: string) => void | — | Controlled selection and its handler. |
| defaultValue | string | — | Initial selection when uncontrolled. |
| disabled | boolean | false | Disables the whole group. |
RadioCardsItem
| Prop | Type | Default | Description |
|---|---|---|---|
| value | string | — | Value selected when this card is chosen (required). |
| disabled | boolean | false | Makes a single card non-selectable. |
Accessibility
Built to be keyboard-navigable and screen-reader friendly out of the box.
| Key | Function |
|---|---|
| Tab | Moves focus into the group. |
| Arrow+Down | Selects the next card. |
| Arrow+Up | Selects the previous card. |
- Built on the radio-group pattern — exactly one card is selected at a time.
- The whole card is the hit target, not just a small control.
- Keep card content concise so the selected state stays scannable.
Guidelines
Conventions that keep usage consistent across an app.
Do
- Use for picking one option from a small set of rich choices (plans, methods).
- Show price or key detail directly on each card.
Don’t
- Don’t use for multi-select — that’s Checkbox Cards.
- Don’t overload a card with multiple actions.