# react.form.form-field

The wiring every accessible form field needs, once: a `<label>` whose `for`
names the control, a hint and an error message with ids of their own, and the
control's `aria-describedby` listing them, hint first. `FormField` renders the
GOV.UK Design System form group around any control you give it as children;
`fieldIds` gives the same ids to the control. Every other `react.form`
component is built on these two.

```tsx
import { FormField, fieldIds } from "#fune/react.form.form-field@^1";

const ids = fieldIds("colour", true, Boolean(error));
<FormField id="colour" label="Favourite colour" hint="Pick one" error={error}>
  <input id={ids.control} name="colour" aria-describedby={ids.describedBy ?? undefined} aria-invalid={error ? true : undefined} />
</FormField>
```

The order is the one GOV.UK uses: label, hint, error message, control. The
error message starts with a visually hidden "Error:", so a screen reader user
hears that it is an error and not more hint text. `fune-field--error` on the
wrapper is the hook for the red bar a stylesheet draws.

`null`, `undefined`, `false` and `""` as a hint or an error mean there is
none: nothing is rendered and nothing is described. Any other node, a number
included, is shown.

Ids are passed in, never generated, so the server and the browser agree on
them and the vectors are exact; the components built on this one fall back to
React's `useId()` when you leave the id out. An id cannot contain a space,
because `aria-describedby` is a list of ids separated by spaces.

Class names are stable and unstyled: `fune-field`, `fune-field--error`,
`fune-label`, `fune-hint`, `fune-error-message`, `fune-visually-hidden`.
`react.form.styles` is an optional stylesheet for them.

Sources: GOV.UK Design System, "Text input" (form group, hint and error
message markup) https://design-system.service.gov.uk/components/text-input/ and
"Error message" https://design-system.service.gov.uk/components/error-message/;
WAI-ARIA 1.2, aria-describedby https://www.w3.org/TR/wai-aria-1.2/#aria-describedby.