# react.form.fieldset

Groups inputs that answer one question - an address, a date, a set of radios -
under a `<legend>` that asks it. The hint and the error message describe the
fieldset itself (`aria-describedby` on the `<fieldset>`), so a screen reader
announces them once on entering the group, not again on every input. This is
the GOV.UK Design System fieldset; `react.form.radio-group`,
`react.form.checkbox-group` and `react.form.date-input` are built on it.

```tsx
import { Fieldset } from "#fune/react.form.fieldset@^1";

<Fieldset id="address" legend="What is your address?" hint="Your home address" error={errors.address}>
  <TextField id="address-line-1" label="Address line 1" autoComplete="address-line1" />
  <TextField id="town" label="Town or city" autoComplete="address-level2" />
</Fieldset>
```

`isPageHeading` puts the legend's text in an `<h1>`, for a page that asks one
question: the question is then both the page's heading and the group's
name, as GOV.UK recommends, rather than two headings saying the same thing.

The id names the hint and the error, `<id>-hint` and `<id>-error` (see
`react.form.form-field`); the `<fieldset>` itself has no id, as in GOV.UK,
because the group's controls own it: the first radio or checkbox is `<id>`, a
date's inputs `<id>-day` and so on, and that is what an error summary links
to. Left out, the id is React's `useId()`. It holds no state, so it is not a
client component and renders on the server.

Classes: `fune-field` (and `fune-field--error`), `fune-fieldset`,
`fune-legend` (and `fune-legend--heading`), `fune-legend-heading`,
`fune-hint`, `fune-error-message`, `fune-visually-hidden`.

Source: GOV.UK Design System, "Fieldset"
https://design-system.service.gov.uk/components/fieldset/ and "Legends as
page headings" https://design-system.service.gov.uk/get-started/labels-legends-headings/.