Loading navigation…
User
API and Development
CheckboxCardGroup drives Radix CheckboxCards with an options array. Each entry renders a CheckboxCard with value, label, optional description, and layout flags. The group supports controlled value / onValueChange, indicatorPosition, indicatorHidden, horizontal (lays cards out in a single row), disabled, and readOnly (shows lock affordance and blocks changes).
Name | Type | Default | Description |
|---|---|---|---|
|
| — | The label to display on the checkbox card |
|
| — | The value of the checkbox card |
|
| — | Optional description content to display below the label |
|
|
| Whether the checkbox card is disabled |
|
|
| Whether to hide the checkbox indicator |
|
|
| Position of the indicator relative to the content |
|
|
| Whether the checkbox card is read only |
Interactive examples and edge cases for this component are in Storybook.
Name | Type | Default | Description |
|---|---|---|---|
|
|
| Stable id. |
|
|
| Primary line. |
|
|
| Secondary line. |
|
|
| Overrides group default when supported. |
|
|
| Per-card indicator visibility. |
|
|
| Lock icon when group is read-only. |
A card-based pattern for more descriptive or visual options.
Use for simple selections with an optional description.
Provide added context or benefits.
Disable options based on conditions.
Indicators can also appear on the right-side of the checkbox card for elements aligned to the right-hand side of the page.
Hide the checkbox indicator when you do not want a visible state.
Manage multiple cards with controlled or uncontrolled selection.
Allow selecting more than one option.
Control selection state externally for complex flows.
Disable all cards when selection is unavailable.
Place indicators on the right for alternate layouts.