Components · Form Controls
A radio group where each option is a whole card: title, description and optional icon, one choice.
import { Radio Card } from '@nexub/react';When to use
Reach for this component when…
When not to use
Pick a different component if…
Two columns from the sm breakpoint up, one below.
Disable one card, or pass `disabled` to the group to disable all of them.
| Prop | Type | Default | Required | Description |
|---|---|---|---|---|
| RadioCardGroup columns | 1 | 2 | 3 | 4 | 1 | — | Grid columns. Collapses to one column on narrow screens. |
| RadioCardGroup value / defaultValue / onValueChange | string | — | — | Radix RadioGroup props; the group also takes `disabled`, `name`, `required`. |
| value | string | — | ✓ | The option this card selects. |
| title | ReactNode | — | ✓ | The card’s accessible name. |
| description | ReactNode | — | — | Secondary text, exposed as the accessible description. |
| icon | ReactNode | — | — | Leading icon. Turns primary when selected. |
| children | ReactNode | — | — | Extra content under the description. Keep it non-interactive: the whole card is the control. |
| disabled | boolean | false | — | Disables this card only. |