Radix mounts a radio's indicator only while that radio is selected, so a keyframe on it runs exactly when the selection lands there. The keyframe is gated on the item's data-animate, which is set only once its checked state changes, so the option that's selected on first paint shows its dot without popping (the same rule as Checkbox). It also requires the dot's own data-state="checked", so the dot being deselected leaves at once instead of re-popping on its way out.

The dot starts at 30% of its size, deeper than the checkbox's 50%, because it has more room to grow inside the ring before it reads as "filled". The animation sits on the indicator <span>, not the <svg>, so Chrome can composite it.

With the keyboard, arrow keys move both focus and selection, so each newly selected dot grows in while the previous one disappears. Nothing has to coordinate the two: each radio's indicator mounts and unmounts on its own.

With a pointer, the ring presses to 90% on the bouncy spring while it's held. shadcn's transition-[color,box-shadow] is gone, so border and focus-ring changes snap instead of repainting over 150ms.

Click an option, or Tab into the group and use the arrow keys.