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.

Vue component: RadioGroupItem

Slot	Default classes	Description
root	5 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.
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.

Default classes:

text-primary dark:bg-input/30 hairline aspect-square size-6 shrink-0 rounded-full shadow-vueda-control transition-shadow
dark:hairline-border-strong
disabled:cursor-not-allowed disabled:opacity-50
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:33

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:37