Ninety-six variants of a 16px circle: chosen or not, four states, plain or boxed, control on either side, and three amounts of text beside it.
Two components, ninety-six variants
Radio Button - Active × State × Type × Control Placement × Show Label × Show Description: Selected · Not × Default · Focus · Disabled · Invalid × Default · Box × Start · End × three text combinations
Radio Group - none: 189 × 262 - six buttons stacked 8 apart
Using the Radio Group
Why ninety-six and not a hundred and twenty-eight?
Because one text combination cannot exist. Two selections times four states times two types times two placements is thirty-two, and each is drawn three ways: label with description, label alone, control alone. The fourth - a description with no label - is not a thing anyone builds, so it was never drawn, and thirty-two of the possible variants disappear with it.
Why is the circle on radius.md?
Because at 16 across, radius.md is 8, which is exactly half the side - the corners meet and it renders as a circle without reaching for radius.full. Inside it sits an 8px ellipse in base.primary-foreground, present only when the option is chosen; the unchosen control is base.background on a base.input edge with nothing in the middle.
What does Type Box change?
It wraps the same row in 10 of padding and a radius.lg edge, turning a list item into a card you can click anywhere on. A selected box fills with base.primary, which means the label and the description have to invert with it - that inversion is what the file had wrong.
When would the control go on the right?
In a settings list, where the labels are what you scan and the controls should line up on one edge. In a form the control comes first, because it is the thing you are aiming at and the label explains it. Same variants, one property apart - the last usage example on this page shows both in one screen.
What colour is the description on a chosen Box?
colors.muted-foreground-dark, at #a1a1a1 - quieter than the label, and 6.9:1 on the near-black card. Making it the same white as the label passes contrast easily but flattens the hierarchy: two lines shouting equally in a card whose whole job is to say one option is picked. Checkbox and Switch read the same way, so all three siblings agree. The destructive card is the exception and stays white on both lines, because red at that lightness leaves no room for a third step.