Radio

One option out of a set, and the label that says which.

<Radio.Group>
  <Radio>
    <Radio.Indicator />
    <Radio.Label />
  </Radio>
</Radio.Group>

• Radio — the root, and it is the row, not the circle. It is the pressable: it owns the selected state, resolves the recipe once (R5) and publishes it to its slots.
• Radio.Indicator — the circle, and the dot inside it. With no children it draws its own dot.
• Radio.Label — what choosing this option means.
• Radio.Group — the set, and the one option in it that is chosen. Optional: a radio over its own isSelected works without one.

It is the Checkbox in a circle, with one rule changed: a press selects, it never clears. A set of options has no "none of these" unless one of them says so, and a radio you could tap back to empty would be a checkbox that happens to be round. onSelectedChange therefore only ever fires with true, and pressing the chosen option fires nothing at all.

Everything else is the checkbox's, deliberately: the root is the row so the label chooses the option, R3 wraps a text child into the label and supplies the circle, the three variants and the four sizes are the same tokens, and no slot carries a margin (R4).

Controlled, or not

<Radio isSelected={plan === 'yearly'} onSelectedChange={() => setPlan('yearly')}>
  Tous les ans — deux mois offerts
</Radio>

<Radio defaultSelected>Choisie au départ</Radio>

isSelected present means the caller owns the value; defaultSelected is for the standalone case. Inside a Radio.Group neither is needed — the set is the controlled source — and isSelected still outranks it, which is what lets one option in a group be driven by something the group knows nothing about. onPress fires either way, composed with the selection: it is what a wrapper listens to when it wants the press rather than the change.

Invalid

<Radio isInvalid>Aucune option choisie</Radio>

The border, the fill and the label turn danger, and the resting fill is dropped: an option that is wrong reads as an outline. On a set, put it on the group — the error belongs to the question, not to one of its answers.

Disabled

<Radio isDisabled defaultSelected>
  Indisponible
</Radio>

On the row, not the circle: what is disabled is the control, and the label is part of it.

A mark of your own

<Radio.Indicator>
  <Icon as={CheckIcon} size={12} color={theme.colors.accentForeground} />
</Radio.Indicator>

Children replace the built-in dot and ride the same fade.

As another element

<Radio asChild isSelected={isChosen} onSelectedChange={choose}>
  <Animated.View layout={LinearTransition}>…</Animated.View>
</Radio>

R12 — the caller's element is the row, so it takes the children it was written with and the auto-wrap does not apply.

Sizes

The same four boxes as the Checkbox, so a radio and a checkbox in one form line up. The dot keeps the reference implementation's ratio — 10 in 24 — rather than being tabulated, so it is one dot at four sizes instead of four drawings of one.

radius is full and overridable: a squared-off option in a segmented row is a real design, and every control in this library takes the same prop.

Variants and colour

The Checkbox's three levels, on the same field* tokens:

A variant describes the circle at rest. Chosen, all three are the accent — or color, which lands on the fill through the bgSelected role, with the dot on fgSelected. The tint is ignored while isInvalid, as on the Checkbox.

Why a role and not an axis is written up once, in checkbox.md, and it holds here unchanged.

• accessibilityRole="radio" on the root, overridable, with accessibilityState.checked following the value and .disabled following isDisabled. A caller's own accessibilityState is merged, not spread over.
• aria-invalid follows isInvalid.
• accessibilityRole="radiogroup" on Radio.Group, overridable, so a screen reader announces "2 sur 3" rather than three unrelated controls. A set built without the group needs that role on whatever wraps it.
• The whole row is the touch target, which is what makes a 24pt circle reachable.

The legacy RadioGroup also carried orientation — unchanged — and the shared variant / size / radius / themeColor / labelAlignment / fullWidth for its options. The first three are handed down as before, themeColor becomes color with a raw value (R7), and the last two are gone with the props they mirror: labelAlignment is JSX order plus a style prop on the row, and fullWidth is width="100%".

One difference worth reading twice: the legacy group rendered its options from an array of items, ours takes them as children. A set of options that comes from data is a map, and it is the same map the rest of this library asks for.