Radio

One option. Everything it does not decide, the group decides for it.

import { Radio } from "@dede-style/ui/radio", then <Radio value="standard" label="Standard" /> inside a RadioGroup. It takes the form name, the selected value and the handler from its parent — so what is left here is what one option owns.

BillingMonthlyPay as you go, cancel any timeAnnuallyTwo months free

It cannot stand on its own, and that is a property rather than a limitation. Radios are one control because they share a name, so an option outside a group has nothing to join, no value to compare itself against and nobody to tell. Rendering one alone throws in development rather than quietly producing a control that answers to nobody.

The group therefore owns everything shared — the name, the selection, the keyboard, and whether the whole set is available — and hands them down through context. Those are on Radio Group, not here.

Value and label are two things

One is what a form carries. The other is what a reader sees.

PlanBasicTeamEnterprise

value is what the group’s value matches, and what a submit sends. It is a string the form cares about — plan-team-monthly — where the label is a word a person reads. They coincide in a props table and almost nowhere else, which is why they are two props rather than one doing both jobs.

The label is also what a screen reader announces as the option’s name — the label alone. The description beneath it is announced afterwards, as a description, and is never folded into the name. A Checkbox does exactly the same, because the two share one row.

Disabled

An option that cannot be chosen stays in the list.

DeliveryStandard5–7 business daysExpressNext business daySame dayNot available in your area

isDisabled on a Radio says this one option cannot be chosen. The row dims — circle, label and description together, one opacity — and is skipped by the arrow keys as well as the pointer, but it stays where it is so the reader can see the option exists and read why it is not theirs. Setting the whole question aside is the group’s job, on Radio Group.

Sizes

Three steps of the circle; the words stay put.

Size 416px — a dense table cellSize 520px — the defaultSize 624px — a touch-first form

16, 20 and 24 — size 4, 5 and 6, the same three steps a Checkbox takes. The gap to the words is 8px at every step and the label’s type does not move: the circle centres on the first line whichever of the two is taller. The dot is 40% of its circle, derived from the size rather than written three times, so it cannot fall out of step with the circle it sits in.

size is the option’s prop rather than the group’s, which is why one group can show all three here. In a real form every option in a group takes the same step, and the default is the middle one.