Components · Form Controls
Radio Card
A radio group where each option is a whole card: title, description and optional icon, one choice.
import { RadioCard } from '@nexub/react';Usage
Two to six options that each need a sentence of explanation, like plans or regions.
A choice important enough to deserve the space.
Short labels with no description: use RadioGroup.
More than six options: use Select or Combobox.
Cards that hold links or buttons: the whole card is the control, so use Card with CardLink.
Examples
Plan picker
Columns
Two columns from the sm breakpoint up, one below.
Disabled
Disable one card, or pass `disabled` to the group to disable all of them.
Props
| Prop | Type | Default | 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. |
| valuerequired | string | — | The option this card selects. |
| titlerequired | 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. |
Accessibility
ARIA roles
Keyboard
- Tab
Moves focus into the group, to the selected card.
- Arrow keys
Move between cards and select.
- Space
Selects the focused card.
Screen reader
The title is the accessible name and the description is the accessible description.
Give the group an `aria-label` or `aria-labelledby`.
On iOS & Android
Web only