# react.form.date-input
A date asked as three text boxes - Day, Month, Year - under one `<legend>`,
with a hint and an error message described to the whole group. It is the
GOV.UK Design System date input as a React component, and it is made to take
`form.date-parts`'s answer directly: its `message` is the `error`, its
`fields` the `errorFields`, so exactly the boxes that need fixing are marked.
```tsx
"use client";
import { useState } from "react";
import { DateInput } from "#fune/react.form.date-input@^1";
import { validateDateParts, type DateParts } from "#fune/form.date-parts@^1";
const [dob, setDob] = useState<DateParts>({ day: "", month: "", year: "" });
const check = submitted
? validateDateParts(dob, "Date of birth", { today, timing: "past", notBefore: null, notAfter: null })
: null;
<DateInput id="dob" legend="What is your date of birth?" hint="For example, 27 3 2007" birthday
value={dob} onChange={setDob}
error={check?.message} errorFields={check?.fields} />
```
The same `validateDateParts` runs in a Python or Rust API on the posted
`dob-day`, `dob-month` and `dob-year`, with the same messages.
- **ids and names**: the `fune-date-input` wrapper is `id` (as GOV.UK), the hint and error `<id>-hint` and `<id>-error`, the boxes `<id>-day`,
`<id>-month`, `<id>-year` (so an error summary can link to `#dob-day`);
their names are `<name>-day` and so on, `name` defaulting to the id.
- **Boxes in error**: with an `error`, the boxes listed in `errorFields` get
`fune-input--error` and `aria-invalid="true"`; with none listed, all three
do, which is GOV.UK's style for an error about the whole date. Without an
`error`, nothing is marked.
- **Keyboard**: `type="text"` with `inputMode="numeric"`, as GOV.UK does:
`type="number"` rounds, scrolls and refuses "jan", which GOV.UK asks
services to accept.
- **birthday** adds `autoComplete` `bday-day`, `bday-month`, `bday-year`
(WCAG 2.2, 1.3.5 Identify Input Purpose).
- **value** with **onChange** is controlled; **defaultValue** alone is
uncontrolled. Either way `onChange` receives all three boxes' text
(`{ day, month, year }`), untrimmed, never the event.
- **onBlur** is called, with nothing, whenever any of the three boxes loses
focus, so a form can mark the date touched (`form.state`'s blur action).
- It keeps the boxes' text in state for onChange, so it is a client component
and its file starts with `"use client"`.
GOV.UK also puts `role="group"` on the date's `<fieldset>`; `react.form.fieldset`
1.0.0 does not take a role, so this does not either. A fieldset is already a
group to assistive technology, so nothing is lost.
Classes: those of `react.form.fieldset` and `react.form.form-field` (each box
sits in its own `fune-field` with a `fune-label`), plus `fune-date-input`,
`fune-date-input-item`, `fune-input` (and `fune-input--error`),
`fune-input--width-2` (day, month) and `fune-input--width-4` (year). Style a
box inside a date with `.fune-date-input .fune-input`.
Sources: GOV.UK Design System, "Date input"
https://design-system.service.gov.uk/components/date-input/ and the "Dates"
pattern https://design-system.service.gov.uk/patterns/dates/; WCAG 2.2, 1.3.5
Identify Input Purpose https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.