Radio Button Group
A single-selection button group with card-style radio options, icons, and custom indicators.
Usage
Delivery And Payment
Subscription Plans
Controlled
Custom Indicator
Disabled Group
Grid Layout
Icon Cards
No Indicator
Render Prop Children
With Icons
With Ripple
CSS Classes
Base Classes
.radio-button-group- Base RadioGroup container with flex layout
Layout Classes
.radio-button-group--grid- Grid layout mode
Element Classes
.radio-button-group__item- Card-like radio button with border and selection ring.radio-button-group__indicator- Positioned top-right indicator (radio dot or custom icon).radio-button-group__item-content- Text/content area wrapping Radio.Content.radio-button-group__item-icon- Leading icon container
Interactive States
- Selected:
[data-selected="true"]on.radio-button-group__item(accent ring) - Focus visible:
:focus-visibleor[data-focus-visible="true"]on.radio-button-group__item(focus ring) - Disabled:
:disabledor[aria-disabled="true"]on.radio-button-group__item(reduced opacity)
CSS Variables
--radio-button-group-item-radius- Border radius of items (default:var(--radius-2xl))
API Reference
RadioButtonGroup
The root component. Wraps HeroUI RadioGroup with card-style layout.
| Prop | Type | Default | Description |
|---|---|---|---|
layout | 'flex' | 'grid' | 'flex' | Layout mode for items |
Also supports all HeroUI RadioGroup props.
RadioButtonGroup.Item
A selectable card wrapping HeroUI Radio. Supports render prop children for accessing selection state.
Also supports all HeroUI Radio props.
RadioButtonGroup.Indicator
Selection indicator positioned at the top-right of the item.
- No children: renders the default HeroUI radio dot (Control + Indicator)
- With children: renders a custom icon that appears only when selected
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Custom indicator icon (shown when selected) |
Also supports all native span HTML attributes.
RadioButtonGroup.ItemContent
Content area for title and description text. Wraps HeroUI Radio.Content.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Content elements |
Also supports all native div HTML attributes.
RadioButtonGroup.ItemIcon
Leading icon container.
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Icon element |
Also supports all native div HTML attributes.