RadioCard

RadioCard

<RadioGroup label="Billing cycle" defaultValue="annual">
  <RadioCard value="monthly" title="Monthly" description="$10 / month" />
  <RadioCard value="annual"  title="Annual"  description="$100 / year — save 17%" />
</RadioGroup>

Install: @helixui/core

import { RadioCard } from '@helixui/core'

status: stable · since: 0.1.0

Tags: radio, card, option, selectable

Anatomy

┌─ ◉ Title ──────────┐
│   description       │
│   [icon]            │
└─────────────────────┘

Layout

• display — block
• width — fill
• height — content
• intrinsicSize — card-sized; rows grow with content
• stackable — true
• fullBleed — false

Visual

A Card-shaped radio option. Selected state highlights with a brand border + tinted background; the radio dot is in the top-left or top-right per variant.

Props

Name	Type	Default	Description
value	string	—	Required. The value submitted when this option is selected.
title	ReactNode	—	Headline of the card.
description	ReactNode	—	Supporting text below the title.
icon	ReactNode	—	Optional leading icon.
isDisabled	boolean	false	Disables this option.

Slots

• children — additional content

Tokens used

color.bg.surface.default, color.bg.action.brand.subtle, color.bg.action.brand.default, color.border.default, color.border.strong, color.border.focus, color.text.primary, color.text.secondary, color.text.action.brand, radius.md, space.1, space.3, space.4, font.family.sans, font.size.md, font.size.sm, font.weight.semibold

Accessibility

Role: radio

Keyboard

Key	Action
ArrowDown	Move to next option in group.
ArrowUp	Move to previous option in group.
Space	Selects the focused card.

Composes with

Component	Relation	Note
RadioGroup	parent	Use inside a RadioGroup.

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

plan picker

“three plan radio cards”

<RadioGroup value={plan} onChange={setPlan}>
  <RadioCard value="free" title="Free" description="$0/mo" />
  <RadioCard value="pro" title="Pro" description="$12/mo" />
  <RadioCard value="team" title="Team" description="$24/mo" />
</RadioGroup>

Related

• RadioGroup