Radio Card

01Preview

Change the controls to try every supported combination. The cards are a controlled RadioGroup: click anywhere on a card to select it.

<RadioGroup label="Learning path" value={path} onValueChange={setPath}>
  <RadioCard
    value="guided"
    label="Guided path"
    sublabel="(Recommended)"
    badge={<Badge size="sm" color="blue" appearance="light">New</Badge>}
    description="Lessons unlock in order, with a quiz after each unit."
    leading={<KeyIcon icon={<RiKey2Line />} size={40} />}
  />
  <RadioCard value="free" label="Free explore" description="Open any lesson in any order." />
</RadioGroup>

02Installation

pnpm add @nuton/ui @nuton/tokens @remixicon/react

npm install @nuton/ui @nuton/tokens @remixicon/react

yarn add @nuton/ui @nuton/tokens @remixicon/react

import '@nuton/tokens/tokens.css'
import '@nuton/ui/styles.css'

03Usage

import { RadioCard, RadioGroup } from '@nuton/ui'

<RadioGroup label="Choose a plan" name="plan" defaultValue="pro">
  <RadioCard value="free" label="Free" description="3 courses, community support." />
  <RadioCard value="pro" label="Pro" sublabel="($8/month)" description="Unlimited courses and AI tutor feedback." />
</RadioGroup>

• Use cards when each option needs a description, price or visual. For short options, use Radio.
• Always put cards in a RadioGroup. It shares the name, holds the value, names the set with its legend and gives native arrow-key movement. Cards stretch to the group's width (Figma 360px).
• The whole card is the click target. Each card needs a value.
• Preselect the most common or safest option unless the choice must be deliberate.
• The leading visual is decorative. Use a 40px KeyIcon, Avatar or a logo your app supplies.

04Variants and sizes

Radio Card has one size. Figma's Type property only changes the leading visual, so code takes any 40px element in `leading`.

Types (leading visual)

<RadioGroup label="Leading visual" defaultValue="basic">
  <RadioCard value="basic" label="Basic" description="No leading visual." />
  <RadioCard value="icon" label="Left icon" description="A 40px key icon." leading={<KeyIcon icon={<RiKey2Line />} size={40} />} />
  <RadioCard value="avatar" label="Avatar" description="A 40px avatar." leading={<Avatar name="Amara Okafor" size={40} />} />
  <RadioCard value="logo" label="Card provider, brand or company" description="Pass your own logo." leading={<img src={logo} alt="" />} />
</RadioGroup>

Card Provider, Brand and Company show third-party logos in Figma. Nuton ships no brand assets (D12), so pass your own <img alt=""> or SVG; it is sized to the 40px slot.

Layout

The default row puts the text between the leading visual and the radio. layout="stacked" puts the visual and the radio on one row with the text below, which suits short choices in a two-column grid, such as the onboarding questions.

<RadioGroup label="Tutor" defaultValue="professor" orientation="horizontal">
  <RadioCard layout="stacked" value="professor" label="The Professor" description="Formal, structured, academic." leading={<KeyIcon icon={<RiGraduationCapLine />} size={40} />} />
  <RadioCard layout="stacked" value="coach" label="The Coach" description="Encouraging and confidence building." leading={<KeyIcon icon={<RiFocus3Line />} size={40} />} />
</RadioGroup>

Stacked cards draw the selected state with a 2px primary stroke, as Figma's Active variant does (3045:53929). Row cards keep the 1px stroke. Both are code-only choices pending design (C83).

Text options

<RadioCard
  value="guided"
  label="Guided path"
  sublabel="(Recommended)"
  badge={<Badge size="sm" color="blue" appearance="light">New</Badge>}
  description="Lessons unlock in order, with a quiz after each unit."
/>

05States and interactions

State tokens

Set on .nu-choice-card, shared with Checkbox Card: --nu-choice-card-bg (Bg/White), -bg-hover (Bg/Weak-50), -stroke (Stroke/Soft-200), -stroke-checked (State/Primary/Base), -shadow (regular-shadow/x-small) and -focus-shadow (buttons/primary-focus).

06Composition examples

Plan picker

A controlled group with prices in the sublabel and a badge for the popular plan.

const [plan, setPlan] = useState('pro')

<RadioGroup label="Choose a plan" value={plan} onValueChange={setPlan}>
  <RadioCard value="free" label="Free" description="3 courses, community support."
    sublabel="(Current plan)" />
  <RadioCard value="pro" label="Pro" sublabel="($8/month)" description="Unlimited courses and AI tutor feedback."
    badge={<Badge size="sm" color="blue" appearance="light">Popular</Badge>} />
  <RadioCard value="team" label="Team" sublabel="($6/seat)" description="Shared spaces, progress reports and admin tools." />
</RadioGroup>

07API reference

Props

Accessibility

You must: put cards in a RadioGroup with a label, and give each card a unique, meaningful label.

Figma mapping

08Guidelines and related components

Do and don't

Related components

• RadioThe compact control for short options.
• Checkbox CardThe same card for choosing any number of options.
• Key IconThe 40px leading visual for the Left Icon type.