# react.form.select

A drop-down list with its label, an optional hint and error message, and the
accessible wiring done: the label's `for`, the select's `aria-describedby`
(hint, then error) and `aria-invalid` when there is an error. It is the
GOV.UK Design System select, built on `react.form.form-field`.

**Try not to use it.** GOV.UK: "Before using the select component, try
asking users questions which will allow you to present them with fewer
options", and then use radios (`react.form.radio-group`). Selects are hard
for many people to use, hide the options until opened, and are awkward on a
phone. Keep this for long lists a person knows the answer to, such as a
country, or for sorting a list of results.

```tsx
"use client";
import { Select } from "#fune/react.form.select@^1";

<Select id="sort" label="Sort by" value={sort} onChange={setSort}
  options={[
    { value: "published", label: "Recently published" },
    { value: "updated", label: "Recently updated" },
    { value: "views", label: "Most views" },
  ]} />
```

- **placeholder** adds a first option with the value `""` ("Choose a
  country"). With **required**, the browser refuses the form until something
  else is chosen, and a post without a choice arrives as an empty value.
  An option of its own with the value `""` beside a placeholder is refused.
- **onChange** is called with the chosen value, not the event. **value**
  with onChange is controlled; **defaultValue** alone is uncontrolled. React
  renders the chosen option as `selected`; a value that is no option selects
  nothing, so the browser shows the first.
- **onBlur** is called, with nothing, when the select loses focus, so a form
  can mark the field touched (`form.state`'s blur action).
- **Option labels are text** (`string`, not a node): an `<option>` cannot hold
  markup, and React warns if it is given an element.
- **autoComplete** takes the HTML token, such as `country`, so a browser can
  fill it.
- **id** is the select's id and, unless **name** says otherwise, the name it
  posts under; React's `useId()` when left out.
- Option values must be unique (they are the React keys).

It is a client component (it listens for changes), so the built file starts
with `"use client"`.

Classes: those of `react.form.form-field`, plus `fune-select` (and
`fune-select--error`).

Sources: GOV.UK Design System, "Select" (markup, error state, and the advice
to ask questions that allow radios instead)
https://design-system.service.gov.uk/components/select/ and "Radios"
https://design-system.service.gov.uk/components/radios/.