RadioGroupItem

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

The individual radio chit inside a RadioGroup.root. 24px circle, paired with the 24px 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) so the ring stays visible on hovered list rows. Selected state is carried by the inner 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

Slot	Default classes	Description
root	6 classes	The individual radio chit inside a RadioGroup.root. 24px circle, paired with the 24px 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) so the ring stays visible on hovered list rows. Selected state is carried by the inner 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	relative flex items-center justify-center	The centring wrapper for the selected dot. relative flex items-center justify-center parks the painted RadioGroupItem.dot dead-centre regardless of font-size or zoom; the parallel of Checkbox.indicator for the radio family's single-select shape.
dot	size-3 rounded-full bg-current	The selected-state dot painted inside RadioGroupItem.indicator. 12px circle on bg-current so it inherits the parent 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.

root

The individual radio chit inside a RadioGroup.root. 24px circle, paired with the 24px 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) so the ring stays visible on hovered list rows. Selected state is carried by the inner 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-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

indicator

The centring wrapper for the selected dot. relative flex items-center justify-center parks the painted RadioGroupItem.dot dead-centre regardless of font-size or zoom; the parallel of 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

dot

The selected-state dot painted inside RadioGroupItem.indicator. 12px circle on bg-current so it inherits the parent 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