# RadioCardGroup

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/radioCardGroup
*Captured:* 2026-04-27T14:57:22.225Z

Card-based radio selection built on top of RadioButton. Supports options-based usage and a compound API via RadioCardItem and RadioCardIndicator.

## RadioCardGroup

### Example: This option is a first option

Inline cards Option 1
This option is a first option

Option 2
This option is a second option

Option 3
This option is a third option

Stacked horizontal cards Lorem ipsum

Dolor sit amet

Qui repellat dolores

Stacked cards Option 1
This option is a first option

Option 2 (disabled)
This option is a second option

Option 3
This option is a third option

Option 4
This option is a forth option

Reset selection Unselect

#### React (tsx)

```tsx
import { useState } from 'react';

import Button from '@rio-cloud/rio-uikit/Button';
import RadioCardGroup, { type RadioCardOption } from '@rio-cloud/rio-uikit/RadioCardGroup';

const boxOptions: RadioCardOption[] = [
    {
        value: 'option-1',
        label: 'Option 1',
        description: 'This option is a first option',
    },
    {
        value: 'option-2',
        label: 'Option 2',
        description: 'This option is a second option',
    },
    {
        value: 'option-3',
        label: 'Option 3',
        description: 'This option is a third option',
    },
];

const stackedHorizontalOption: RadioCardOption[] = [
    {
        value: 'option-1',
        label: 'Lorem ipsum',
    },
    {
        value: 'option-2',
        label: 'Dolor sit amet',
    },
    {
        value: 'option-3',
        label: 'Qui repellat dolores',
    },
];

const stackedOptions: RadioCardOption[] = [
    {
        value: 'option-1',
        label: 'Option 1',
        description: 'This option is a first option',
    },
    {
        value: 'option-2',
        label: 'Option 2 (disabled)',
        description: 'This option is a second option',
        disabled: true,
    },
    {
        value: 'option-3',
        label: 'Option 3',
        description: 'This option is a third option',
    },
    {
        value: 'option-4',
        label: 'Option 4',
        description: 'This option is a forth option',
    },
];

export default () => {
    const [boxValue, setBoxValue] = useState('option-1');
    const [stackedValue, setStackedValue] = useState('option-1');
    const [stackedHorizontalValue, setStackedHorizontalValue] = useState('option-1');

    return (
        <div className='space-y-50'>
            <div>
                <label>Inline cards</label>
                <RadioCardGroup
                    name='radioCardGroupInline'
                    options={boxOptions}
                    value={boxValue}
                    onChange={nextValue => setBoxValue(nextValue)}
                />
            </div>
            <div>
                <label>Stacked horizontal cards</label>
                <RadioCardGroup
                    name='radioCardGroupStackedHorizontal'
                    options={stackedHorizontalOption}
                    value={stackedHorizontalValue}
                    onChange={nextValue => setStackedHorizontalValue(nextValue)}
                    variant='stacked-horizontal'
                />
            </div>
            <div>
                <label>Stacked cards</label>
                <RadioCardGroup
                    name='radioCardGroupStacked'
                    options={stackedOptions}
                    value={stackedValue}
                    onChange={nextValue => setStackedValue(nextValue)}
                    variant='stacked'
                />
                <div className='display-flex gap-10 margin-top-10'>
                    <Button onClick={() => setStackedValue('option-1')}>Reset selection</Button>
                    <Button onClick={() => setStackedValue('')}>Unselect</Button>
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="space-y-50">
    <div>
        <label>Inline cards</label>
        <div class="display-flex gap-15">
            <label class="radio padding-15 border rounded border-color-highlight" tabindex="0">
                <input type="radio" class="padding-15 border rounded border-color-highlight" name="radioCardGroupInline" value="option-1" checked="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 1</div>
                        <div class="text-color-dark">This option is a first option</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border rounded" tabindex="0">
                <input type="radio" class="padding-15 border rounded" name="radioCardGroupInline" value="option-2">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 2</div>
                        <div class="text-color-dark">This option is a second option</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border rounded" tabindex="0">
                <input type="radio" class="padding-15 border rounded" name="radioCardGroupInline" value="option-3">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 3</div>
                        <div class="text-color-dark">This option is a third option</div>
                    </div>
                </div>
            </label>
        </div>
    </div>
    <div>
        <label>Stacked horizontal cards</label>
        <div class="display-flex">
            <label class="radio padding-15 border rounded-top-left rounded-bottom-left border-color-highlight bg-highlight-decent z-index-1" tabindex="0">
                <input type="radio" class="padding-15 border rounded-top-left rounded-bottom-left border-color-highlight bg-highlight-decent z-index-1" name="radioCardGroupStackedHorizontal" value="option-1" checked="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Lorem ipsum</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border margin-left--1" tabindex="0">
                <input type="radio" class="padding-15 border margin-left--1" name="radioCardGroupStackedHorizontal" value="option-2">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Dolor sit amet</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border margin-left--1 rounded-top-right rounded-bottom-right" tabindex="0">
                <input type="radio" class="padding-15 border margin-left--1 rounded-top-right rounded-bottom-right" name="radioCardGroupStackedHorizontal" value="option-3">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Qui repellat dolores</div>
                    </div>
                </div>
            </label>
        </div>
    </div>
    <div>
        <label>Stacked cards</label>
        <div class="display-flex flex-column">
            <label class="radio padding-15 border rounded-top-left rounded-top-right border-color-highlight bg-highlight-decent z-index-1" tabindex="0">
                <input type="radio" class="padding-15 border rounded-top-left rounded-top-right border-color-highlight bg-highlight-decent z-index-1" name="radioCardGroupStacked" value="option-1" checked="">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 1</div>
                        <div class="text-color-dark">This option is a first option</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border margin-top--1" tabindex="0">
                <input type="radio" disabled="" class="padding-15 border margin-top--1" name="radioCardGroupStacked" value="option-2">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 2 (disabled)</div>
                        <div class="text-color-dark">This option is a second option</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border margin-top--1" tabindex="0">
                <input type="radio" class="padding-15 border margin-top--1" name="radioCardGroupStacked" value="option-3">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 3</div>
                        <div class="text-color-dark">This option is a third option</div>
                    </div>
                </div>
            </label>
            <label class="radio padding-15 border margin-top--1 rounded-bottom-left rounded-bottom-right" tabindex="0">
                <input type="radio" class="padding-15 border margin-top--1 rounded-bottom-left rounded-bottom-right" name="radioCardGroupStacked" value="option-4">
                <div class="radio-text-wrapper display-flex">
                    <span class="radio-text">
                    </span>
                    <div class="margin-left-5 margin-right-5">
                        <div class="text-medium">Option 4</div>
                        <div class="text-color-dark">This option is a forth option</div>
                    </div>
                </div>
            </label>
        </div>
        <div class="display-flex gap-10 margin-top-10">
            <button type="button" class="btn btn-default btn-component" tabindex="0">Reset selection</button>
            <button type="button" class="btn btn-default btn-component" tabindex="0">Unselect</button>
        </div>
    </div>
</div>
```

#### Props: RadioCardGroup

### RadioCardGroup

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| name | string | — | Name used for all radios in this group. |
| options | RadioCardOption[] | — | List of selectable options. |
| value | string | — | Selected value (controlled usage). |
| defaultValue | string | — | Initially selected value (uncontrolled usage). |
| variant | 'inline' \| 'stacked' \| 'stacked-horizontal' | 'inline' | Card layout variant. Possible values are: 'inline', 'stacked' or 'stacked-horizontal'. |
| gap | string | 'gap-15' | Gap utility class used for the inline layout. |
| onChange | (value: string, event: ChangeEvent<HTMLInputElement>) => void | — | Callback invoked when selection changes. |
| cardClassName | string | — | Additional classes applied to each card. |

#### Props: RadioCardItem

### RadioCardItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Value passed to the underlying radio input. |
| disabled | boolean | false | Disables this radio card. |

## Compound API with mapped items

### Example: This option is a first option

Compound API with mapped items Option 1
This option is a first option

Option 2
This option is a second option

Option 3
This option is a third option

#### React (tsx)

```tsx
import { useState } from 'react';

import RadioCardGroup, {
    RadioCardIndicator,
    RadioCardItem,
    type RadioCardOption,
} from '@rio-cloud/rio-uikit/RadioCardGroup';

const options: RadioCardOption[] = [
    {
        value: 'option-1',
        label: 'Option 1',
        description: 'This option is a first option',
    },
    {
        value: 'option-2',
        label: 'Option 2',
        description: 'This option is a second option',
    },
    {
        value: 'option-3',
        label: 'Option 3',
        description: 'This option is a third option',
    },
];

export default () => {
    const [value, setValue] = useState('option-1');

    return (
        <div className='max-width-500'>
            <label>Compound API with mapped items</label>
            <RadioCardGroup
                name='radioCardGroupCompound'
                value={value}
                onChange={nextValue => setValue(nextValue)}
                className='display-grid grid-cols-2 gap-10'
                cardClassName='text-size-14'
            >
                {options.map(option => (
                    <RadioCardItem key={option.value} value={option.value}>
                        <div className='flex-1-1 margin-x-5'>
                            <div className='text-medium'>{option.label}</div>
                            <div className='text-color-dark'>{option.description}</div>
                        </div>
                        <RadioCardIndicator />
                    </RadioCardItem>
                ))}
            </RadioCardGroup>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-500">
    <label>Compound API with mapped items</label>
    <div class="display-flex gap-15 display-grid grid-cols-2 gap-10">
        <label class="radio padding-15 border rounded border-color-highlight text-size-14" tabindex="0">
            <input type="radio" class="padding-15 border rounded border-color-highlight text-size-14" name="radioCardGroupCompound" value="option-1" checked="">
            <div class="radio-text-wrapper display-flex">
                <div class="flex-1-1 margin-x-5">
                    <div class="text-medium">Option 1</div>
                    <div class="text-color-dark">This option is a first option</div>
                </div>
                <span class="radio-text">
                </span>
            </div>
        </label>
        <label class="radio padding-15 border rounded text-size-14" tabindex="0">
            <input type="radio" class="padding-15 border rounded text-size-14" name="radioCardGroupCompound" value="option-2">
            <div class="radio-text-wrapper display-flex">
                <div class="flex-1-1 margin-x-5">
                    <div class="text-medium">Option 2</div>
                    <div class="text-color-dark">This option is a second option</div>
                </div>
                <span class="radio-text">
                </span>
            </div>
        </label>
        <label class="radio padding-15 border rounded text-size-14" tabindex="0">
            <input type="radio" class="padding-15 border rounded text-size-14" name="radioCardGroupCompound" value="option-3">
            <div class="radio-text-wrapper display-flex">
                <div class="flex-1-1 margin-x-5">
                    <div class="text-medium">Option 3</div>
                    <div class="text-color-dark">This option is a third option</div>
                </div>
                <span class="radio-text">
                </span>
            </div>
        </label>
    </div>
</div>
```

#### Props: RadioCardGroup

### RadioCardGroup

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| name | string | — | Name used for all radios in this group. |
| options | RadioCardOption[] | — | List of selectable options. |
| value | string | — | Selected value (controlled usage). |
| defaultValue | string | — | Initially selected value (uncontrolled usage). |
| variant | 'inline' \| 'stacked' \| 'stacked-horizontal' | 'inline' | Card layout variant. Possible values are: 'inline', 'stacked' or 'stacked-horizontal'. |
| gap | string | 'gap-15' | Gap utility class used for the inline layout. |
| onChange | (value: string, event: ChangeEvent<HTMLInputElement>) => void | — | Callback invoked when selection changes. |
| cardClassName | string | — | Additional classes applied to each card. |

#### Props: RadioCardItem

### RadioCardItem

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| value | string | — | Value passed to the underlying radio input. |
| disabled | boolean | false | Disables this radio card. |