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

# RadioGroupItem

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

> The individual radio chit inside a [RadioGroup.root](/v3/reference/theming/keys/RadioGroup.md#theme-key-RadioGroup-root). 24px circle, paired with the 24px [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root) square so the two single-select families share a row height. `hairline` edge on an input-tinted surface (`dark:bg-input/30`) with the standard focus + `aria-invalid` ring contract; the dark rest edge uses `--border-strong` (parity with [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root)) so the ring stays visible on hovered list rows. Selected state is carried by the inner [RadioGroupItem.dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) via `text-primary` on the root (the dot inherits the colour through `bg-current`); `aria-invalid` recolours the dot to `--destructive` the same way. Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid.

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

| Slot | Default classes | Description |
| --- | --- | --- |
| [root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root) | 6 classes | The individual radio chit inside a [RadioGroup.root](/v3/reference/theming/keys/RadioGroup.md#theme-key-RadioGroup-root). 24px circle, paired with the 24px [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root) square so the two single-select families share a row height. `hairline` edge on an input-tinted surface (`dark:bg-input/30`) with the standard focus + `aria-invalid` ring contract; the dark rest edge uses `--border-strong` (parity with [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root)) so the ring stays visible on hovered list rows. Selected state is carried by the inner [RadioGroupItem.dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) via `text-primary` on the root (the dot inherits the colour through `bg-current`); `aria-invalid` recolours the dot to `--destructive` the same way. Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid. |
| [indicator](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-indicator) | `relative flex items-center justify-center` | The centring wrapper for the selected dot. `relative flex items-center justify-center` parks the painted [RadioGroupItem.dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) dead-centre regardless of font-size or zoom; the parallel of [Checkbox.indicator](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-indicator) for the radio family's single-select shape. |
| [dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) | `size-3 rounded-full bg-current` | The selected-state dot painted inside [RadioGroupItem.indicator](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-indicator). 12px circle on `bg-current` so it inherits the parent [RadioGroupItem.root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root)'s `text-primary` (or `text-destructive` when `aria-invalid`); using `current` keeps the dot in lockstep with the surrounding ring colour without a second class hook. |

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

## root

> The individual radio chit inside a [RadioGroup.root](/v3/reference/theming/keys/RadioGroup.md#theme-key-RadioGroup-root). 24px circle, paired with the 24px [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root) square so the two single-select families share a row height. `hairline` edge on an input-tinted surface (`dark:bg-input/30`) with the standard focus + `aria-invalid` ring contract; the dark rest edge uses `--border-strong` (parity with [Checkbox.root](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-root)) so the ring stays visible on hovered list rows. Selected state is carried by the inner [RadioGroupItem.dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) via `text-primary` on the root (the dot inherits the colour through `bg-current`); `aria-invalid` recolours the dot to `--destructive` the same way. Disabled controls use `--disabled` fill, `--border` edge, and `--disabled-foreground` indicators at full opacity, including when invalid.

Default classes:

```text
text-primary dark:bg-input/30 hairline aspect-square size-6 shrink-0 rounded-full transition-shadow
dark:hairline-border-strong
disabled:!bg-disabled disabled:!text-disabled-foreground disabled:!hairline-border
disabled:cursor-not-allowed
focus-visible:hairline-ring focus-visible:focus-ring-shadow
aria-invalid:hairline-destructive aria-invalid:focus-visible:focus-ring-shadow-destructive aria-invalid:text-destructive
```

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

<a id="theme-key-RadioGroupItem-indicator"></a>

## indicator

> The centring wrapper for the selected dot. `relative flex items-center justify-center` parks the painted [RadioGroupItem.dot](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-dot) dead-centre regardless of font-size or zoom; the parallel of [Checkbox.indicator](/v3/reference/theming/keys/Checkbox.md#theme-key-Checkbox-indicator) for the radio family's single-select shape.

Default classes:

`relative flex items-center justify-center`

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

<a id="theme-key-RadioGroupItem-dot"></a>

## dot

> The selected-state dot painted inside [RadioGroupItem.indicator](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-indicator). 12px circle on `bg-current` so it inherits the parent [RadioGroupItem.root](/v3/reference/theming/keys/RadioGroupItem.md#theme-key-RadioGroupItem-root)'s `text-primary` (or `text-destructive` when `aria-invalid`); using `current` keeps the dot in lockstep with the surrounding ring colour without a second class hook.

Default classes:

`size-3 rounded-full bg-current`

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