Loading navigation…
User
API and Development
RadioCardGroup wraps Radix RadioCards with mutually exclusive selection. Pass options with value, label, and optional description and disabled. Layout, indicator and read-only state belong to the group: horizontal lays out cards in one row, showIndicator hides radio dots, indicatorPosition moves the dot, disabled and readOnly apply to every card. An option's own disabled disables just that card.
Name | Type | Default | Description |
|---|---|---|---|
|
| — | The label to display on the radio card |
|
| — | The value of the radio card |
|
| — | Optional description text to display below the label |
|
|
| Whether the radio card is disabled |
|
|
| Position of the indicator relative to the content |
|
| — | Whether this card is currently selected |
|
|
| Whether the radio card is read only |
|
|
| Whether to show the radio indicator |
Interactive examples and edge cases for this component are in Storybook.
Use for card-based selection with rich content.
Add descriptions to provide additional context for each option.
Position the radio indicator on the right side.
Hide radio indicators for minimal visual presentation.
Control RadioCards selection programmatically.
Disable the entire card group or specific options.
Set disabled on an option to take just that card out of the group. It can't be focused or selected, and arrow-key navigation skips it. The group's disabled still disables every card.
Choose the appropriate component based on context and content needs.
On this page