---
url: "https://vueda.dev/v3/reference/theming/keys/RadioGroup.md"
title: "RadioGroup"
---

# RadioGroup

Source: `client/lib/theme/vueda-tailwind/controls/index.js`

> Layout shell for a vertical run of [RadioGroupItem.root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root). 12px gap (`gap-3`) so the items breathe at the form-level density; the items, not the group, carry the focus and `aria-invalid` rings, so the group itself is a transparent layout container. Override to `flex` or `grid-flow-col` for a horizontal stack without touching the per-item contract.

Vue component: [RadioGroup](/v3/reference/api/vue/RadioGroup.md)

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/RadioGroup.md#theme-key-RadioGroup-root) | `grid gap-3` | Layout shell for a vertical run of [RadioGroupItem.root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root). 12px gap (`gap-3`) so the items breathe at the form-level density; the items, not the group, carry the focus and `aria-invalid` rings, so the group itself is a transparent layout container. Override to `flex` or `grid-flow-col` for a horizontal stack without touching the per-item contract. |

<a id="theme-key-RadioGroup-root"></a>

## root

> Layout shell for a vertical run of [RadioGroupItem.root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root). 12px gap (`gap-3`) so the items breathe at the form-level density; the items, not the group, carry the focus and `aria-invalid` rings, so the group itself is a transparent layout container. Override to `flex` or `grid-flow-col` for a horizontal stack without touching the per-item contract.

Default classes:

`grid gap-3`

Source: `client/lib/theme/vueda-tailwind/controls/RadioGroup.theme.js:16`