Radio Cards

Card-style single-selection. Each option is a bordered card that highlights when selected. Richer than a radio group, clearer than a select.

Molecule

Radio Group · Card

When To Use

Use Radio Cards when the user needs to enter or choose information as part of a larger form or workflow.
Start from this pattern when you need the interaction, spacing, and state treatment to match the rest of the system.
Use the examples below to choose the least complex control that still communicates the user’s next step clearly.

When Not To Use

Do not introduce a heavier or more customizable control when a simpler native-style field is sufficient.
Do not hide required context, validation, or option meaning behind placeholder text alone.

Accessibility Notes

Keep a visible label or an equivalent accessible name attached to the control.
Surface validation and helper text programmatically so assistive technologies receive the same context as sighted users.
Preserve the native focus order and keyboard interactions instead of replacing them with custom behavior.

Key Props / API

Props

options, value, onValueChange, columns, className

Example Code

import { RadioCards } from "@hilum/ui"

const options = [
  { value: "newsletter", label: "Newsletter", description: "Last sent an hour ago", meta: "621 subscribers" },
  { value: "customers", label: "Existing Customers", description: "Last sent 2 weeks ago", meta: "1,200 subscribers" },
  { value: "trial", label: "Trial Users", description: "Last sent 4 days ago", meta: "2,740 subscribers" },
]

function Example() {
  const [value, setValue] = useState("newsletter")
  return <RadioCards options={options} value={value} onValueChange={setValue} />
}

Radio Cards · Basic

3-column default

Label, description, and meta per card

Radio Cards · With icons

Icon + plan details

Good for pricing/tier selection

Radio Cards · Two columns

2-column layout

Use columns={2} for wider cards