# react.form.text-field

A single-line text input with its label, an optional hint and error message,
and everything that makes it accessible wired for you: the label's `for`, the
input's `aria-describedby` (hint, then error) and `aria-invalid` when there is
an error. It is the GOV.UK Design System text input, as a React component.

```tsx
"use client";
import { TextField } from "#fune/react.form.text-field@^1";

<TextField id="email" label="Email address" type="email" autoComplete="email" spellCheck={false}
  hint="We'll only use this to send you a receipt" error={errors.email}
  value={email} onChange={setEmail} />
```

- **type** is `text`, `email`, `tel`, `url` or `search`. The last four bring
  the matching keyboard on a phone. There is no `number`: GOV.UK advises
  against it (it rounds, and scrolls away a value); use `inputMode="numeric"`
  with a text input for a number that is really a code.
- **autoComplete** takes the HTML token (`email`, `tel`, `name`,
  `postal-code`, `one-time-code`...), which lets browsers fill the field and
  meets WCAG 2.2 success criterion 1.3.5, Identify Input Purpose.
- **prefix** and **suffix** (`£`, `per item`) sit beside the input in a
  wrapper and are `aria-hidden`, exactly as GOV.UK does, because a screen
  reader would read them out of context. Say the unit in the label as well.
- **value** with **onChange** is a controlled input; **defaultValue** alone
  is an uncontrolled one, fine for a plain `<form>` post. `onChange` is
  called with the new value, not the event. Do not pass both value and
  defaultValue.
- **id** is the input's id and, unless **name** says otherwise, the name it is
  submitted under. Left out, it is React's `useId()`; pass one whenever an
  error summary has to link to the field.

It is a client component (it listens for input), so the built file starts
with `"use client"`: import it from a server page as it is, and pass it no
functions there.

Classes: those of `react.form.form-field`, plus `fune-input` (and
`fune-input--error`), `fune-input-wrapper`, `fune-input-prefix`,
`fune-input-suffix`.

Sources: GOV.UK Design System, "Text input"
https://design-system.service.gov.uk/components/text-input/; WCAG 2.2, 1.3.5
Identify Input Purpose https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose;
HTML, autofill tokens https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill.