Radio Card

The Radio Card renders a radio button inside a card layout for visually rich single-selection experiences.

Basic Usage

Basic

Pro

import { RadioCard } from "@paramanu/forms-react"

export default function App() {
  return (
    <>
      <RadioCard name="plan" value="basic">Basic</RadioCard>
      <RadioCard name="plan" value="pro">Pro</RadioCard>
    </>
  )
}

<label class="pm-radio-card pm-radio-card--md">
  <input type="radio" class="pm-radio-card__input" name="plan" value="basic" />
  <div class="pm-radio-card__content">Basic</div>
</label>
<label class="pm-radio-card pm-radio-card--md">
  <input type="radio" class="pm-radio-card__input" name="plan" value="pro" />
  <div class="pm-radio-card__content">Pro</div>
</label>

Accessibility

Feature	Detail
Keyboard	Arrow keys navigate between cards in a group
Label	The entire card acts as a label

Best Practices

Group radio cards sharing the same name attribute.
Use for pricing plans, option selection, or similar exclusive choices.

Props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Card size
`disabled`	`boolean`	`false`	Disabled state
`checked`	`boolean`	`false`	Checked state
`name`	`string`	-	Group name
`value`	`string`	-	Radio value

CSS Classes

Class	Description
`pm-radio-card`	Base class
`pm-radio-card__input`	Hidden input
`pm-radio-card__content`	Card content
`pm-radio-card--checked`	Checked state
`pm-radio-card--disabled`	Disabled state