# react.form.radio-group

A question answered by choosing exactly one of a few options - "Where do you
live?", "Have you changed your name?" - inside a fieldset whose legend asks
it. It is the GOV.UK Design System radios component: item hints, an "or"
divider before an option, inline radios for a short yes/no, and small radios.

```tsx
"use client";
import { RadioGroup } from "#fune/react.form.radio-group@^1";

<RadioGroup id="changedName" legend="Have you changed your name?" inline
  hint="This includes changing your last name or spelling your name differently"
  error={errors.changedName} value={changed} onChange={setChanged}
  options={[{ value: "yes", label: "Yes" }, { value: "no", label: "No" }]} />
```

- **onChange** is called with the chosen radio's value, not with the event.
  **value** with onChange is controlled (`""` or any value that is no option
  checks nothing); **defaultValue** alone is uncontrolled. A radio group
  needs no state of its own: the browser knows which radio is chosen.
- **onBlur** is called, with nothing, when any radio in the group loses
  focus, so a form can mark the question touched (`form.state`'s blur action).
- **Ids.** The first radio's id is the `id`, the rest `<id>-2`, `<id>-3`... as
  GOV.UK does, so an error summary linking to `#<id>` lands on the first
  radio. Every radio posts under **name** (the id when left out). An item
  hint is `<item id>-item-hint` and describes only its radio.
- **The group's hint and error** are `<id>-hint` and `<id>-error`, as on
  GOV.UK; the `<fieldset>` itself has no id (`react.form.fieldset` uses the id
  only to name them), so the first radio can have it.
- **The error is the group's.** As on GOV.UK, the hint and error message
  describe the fieldset, and no radio is marked `aria-invalid` (ARIA does not
  support it on a radio; the answer as a whole is wrong).
- **inline** (`fune-radios--inline`) sets the radios side by side. GOV.UK:
  only use it when the question has two options and both are short, like
  Yes and No. **small** gives `fune-radios--small`.
- **divider** on an option shows a `fune-radios-divider` before it, usually
  "or", to set apart a last option such as "I am a British citizen living
  abroad" or "None of the above".
- **required** puts `required` on every radio, so the browser refuses the form
  until one is chosen. **disabled** disables every radio; an option's own
  `disabled` disables it.
- Option values must be unique (they are the React keys), and a group needs
  at least one option.

GOV.UK prefers radios to a select whenever there are few enough options to
show at once; see `react.form.select`. It is a client component (it listens
for changes), so the built file starts with `"use client"`.

Classes: those of `react.form.fieldset`, plus `fune-radios` (and
`fune-radios--inline`, `fune-radios--small`), `fune-radio` (one radio and
its label), `fune-radio-input`, `fune-label fune-radio-label`,
`fune-hint fune-radio-hint`, `fune-radios-divider`.

Sources: GOV.UK Design System, "Radios" (item ids, item hints, inline radios
and when to use them, the divider, small radios, errors on the fieldset)
https://design-system.service.gov.uk/components/radios/ and "Fieldset"
https://design-system.service.gov.uk/components/fieldset/.