@rio-cloud/uikit-mcp 1.1.4 → 1.1.6

package/dist/docs/components/radioCardGroup.md

@@ -0,0 +1,487 @@
+# RadioCardGroup
+
+*Category:* Components
+*Section:* Interaction
+*Source:* https://uikit.developers.rio.cloud/#/components/radioCardGroup
+*Captured:* 2026-02-23T13:41:43.932Z
+
+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 cardsOption 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 cardsLorem ipsum
+
+Dolor sit amet
+
+Qui repellat dolores
+
+Stacked cardsOption 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 selectionUnselect
+
+#### Summary
+
+Inline cardsOption 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 cardsLorem ipsum
+
+Dolor sit amet
+
+Qui repellat dolores
+
+Stacked cardsOption 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 selectionUnselect
+
+#### 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 itemsOption 1
+This option is a first option
+
+Option 2
+This option is a second option
+
+Option 3
+This option is a third option
+
+#### Summary
+
+Compound API with mapped itemsOption 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. |