Radio cards

A React component in Beamline's Form controls category, in the free sample.

One choice among rich options as cards with optional media, icon, detail and a figure; one selection ring follows the stable choice.

Use it for

• Choosing one of a few rich options with a description or price.
• Choosing one of a few image variants or output formats while keeping every option in a stable row.
• The main choice of a form (a goal, a plan) as a field with its label, help and error.

Not for

• Short plain options (radio-group).
• More than about five options (select).

Anatomy

• group visual root
• card (m-control): optional media, head (icon tile, label, detail, radio mark = RadioGroup's m-toggle dot), figure
• figure: closes a grid card under a line-soft seam (body face, tabular digits); inline-end in stacked rows
• one measured selection ring (1.5px accent) that glides

Variants

• stacked: false (side by side), true (rows)
• layout: grid (responsive cards), stacked (rows), row (one nonwrapping, horizontally scrollable row)

States

• chosen (ring + filled mark)
• other
• hover (mark ring strengthens)
• disabled (--pui-opacity-disabled)

Keyboard

• Tab enters the group
• arrows move and choose
• The selected card keeps its stable value and focus when the caller updates its media or labels.

Motion

The ring stretches toward the chosen card on both axes and gathers there: the edges on the side it travels lead and the others follow a beat later, critically damped, never overshooting. Reduced motion: it jumps.

Props

Dependencies

@radix-ui/react-radio-group

Import

import { RadioCards } from "@/components/radio-cards/radio-cards";

Get it

Radio cards is part of Beamline: 190 React components and screens your coding agent (Claude Code, Codex, Cursor or any MCP client) installs into your app through Beamline's MCP server, as a ready-built package or as plain React source you can change. $49 one payment (regular $200), no subscription, a year of updates, one licence for your whole team. Radio cards is in the free sample, which costs nothing. Get Beamline · Connect your agent

More in Form controls

• Allocation editor: Parts of a fixed whole edited as transfers: an ordered strip whose boundaries drag or step between neighbours and a roster of exact amounts where typing…
• Billing toggle: Monthly or yearly: a segmented control whose yearly note turns into what the choice saves.
• Calendar: Month grids for picking a day or a range: a real grid with arrows by day and week, Page keys by month, closed days, today's dot, and a range span that…
• Checkbox: A yes/no choice with an optional label and help, including the mixed state for select-all; the check draws itself in.
• Chip group: Quick filters as chips: a chosen chip fills and grows a check, counts show what each would return, and extra chips fold behind “+N more”.
• Color Palette: A wheel of preset colours to pick from: twelve hues around the ring, their tints inward, white at the middle; the chosen swatch lifts and carries a check.
• Colour picker: A swatch that opens a picker: saturation-brightness plane, hue strip, HEX/RGB/HSL/OKLCH value to type or copy, the screen eyedropper where available…
• Combobox: One value from a long list found by typing (time zones, countries, customers): ranked matches with the match emphasised, keywords, optional group…
• Date picker: One date in a form: a field that opens the month grid under it with focus inside, picks and closes; Today and Clear below, optional clear button.
• Date range picker: A reporting range: presets on one side and two months on the other (one on a phone); the trigger names the preset in use, and the footer counts the days.
• File drop zone: A generous target for files: drop or choose, each checked against type, size and count with the reason when turned away; uploads show progress and can be…
• Form: Validation wiring for react-hook-form (and zod) on the system's own fields: each field already links its label, help and error, so FormField hands over…
• Inline edit: Text that becomes a field in the same place: Enter (or ⌘Enter when multiline) saves, Escape cancels, leaving saves; saving shows progress and a refusal…
• Input: A single-line text field with its label, help and error wired for assistive tech, three sizes and adornments.
• Input Dissolve: A one-line field whose text breaks into specks and drifts off once it is sent, last letter first; the field is empty and ready again.
• Label: The text label tied to a form control, with a required marker that screen readers announce.
• Mention input: A composer where @people and #channels become single tokens with suggestions at the caret; the value keeps the text and where each mention sits.
• Multi-select: Several values from a known list as removable chips in the field; the list has a search field (for long lists), checkable rows and a count with Clear.
• Number field: A bounded number with − and +: arrows and Page keys step, typing is read in the locale and clamped on leaving, limits can be explained, and the label can…
• OTP input: A verification code in separate boxes backed by one real field, so paste, SMS autofill and Backspace work; optional groups like 123–456.
• Password field: A password field with a reveal control, and a strength meter when a password is being created.
• Phone input: A phone number with its country: searchable picker with country and dialling codes, “+44…” switches the country, the number groups as typed, and the…
• Radio group: One choice from a short visible set, each option with an optional description, vertical or in a row.
• Rich text editor: A Notion-grade writing surface: slash menu for every block, a formatting toolbar on selection, drag-to-move blocks, nesting, markdown shortcuts, paste…
• Search field: The search entry point: magnifier, clear button, Escape to clear, a shortcut hint and an optional live border beam.
• Segmented control: Two to five views or ranges of the same content (1D / 1W / 1M, List / Board): a radio group whose raised thumb slides to the choice.
• Select: One choice from a short known list, in the same frame as every text field: label, help, error, option groups and details.
• Shortcut recorder: Lets people set their own shortcut: press the keys, see them as keycaps; a clash or a browser-kept shortcut asks first. ShortcutCheatsheet lists every…
• Signature pad: A pad for a drawn signature whose ink thins with speed; undo, replay, PNG or SVG export, and typing instead for keyboards and screen readers.
• Slider: A value or range on a known scale: the thumb grows under the finger and shows its value while dragged or focused; marks, end icons and a value readout.
• Switch: A setting that applies at once: a thumb that slides on a spring and stretches under the finger, with an optional label before or after.
• Tag input: Short free-form values as tags: Enter, comma or Tab adds, a pasted list adds them all, Backspace twice removes the last; duplicates and invalid values…
• Textarea: Multi-line plain text that grows with what is typed up to a limit, with an optional character count.
• Time picker: A time of day as hour and minute segments, typed or stepped, 12- or 24-hour; the clock opens a list of times at the step.
• Toggle group: Pressable toggles where one or several can be on: alignment, bold and italic, view options; bare for toolbars or framed.