RadioCards

Radio buttons rendered as cards. Great for plans, payment methods, and any option with a label + description.

Examples

Plans

FreeFor getting started — basic features.

ProFor production — full features.

EnterpriseSLA + dedicated support.

<RadioCards
  value={plan}
  onChange={setPlan}
  options={[
    { value: 'free', label: 'Free', description: 'For getting started.' },
    { value: 'pro', label: 'Pro', description: 'For production.' },
    { value: 'enterprise', label: 'Enterprise', description: 'SLA + support.' },
  ]}
/>

API Reference

Props of the RadioCards component.

Prop	Type	Default	Description
`value*`	`T`	—	—
`onChange`	`(value: T) => void`	—	—
`options*`	`{ value: T; label: string; description?: string; disabled?: boolean }[]`	—	—
`orientation`	`'horizontal' \| 'vertical'`	`'horizontal'`	—
`disabled`	`boolean`	`false`	—