Form

1import { Field, FieldRow, Fieldset, TextInput } from '@/ui/Input'23<form onSubmit={handleSubmit} noValidate>4  <Fieldset legend="Your details" description="We only ask for what we need to bill you.">5    <Field label="Full name" required>6      <TextInput autoComplete="name" {...register('name')} />7    </Field>89    <Field10      label="Email"11      description="Receipts and password resets go here."12      status={showError('email') ? 'error' : 'default'}13      message={showError('email') ? errors.email : undefined}14      required15    >16      <TextInput type="email" inputMode="email" autoComplete="email" {...register('email')} />17    </Field>1819    {/* Pair only what is genuinely one piece of information */}20    <FieldRow cols={2}>21      <Field label="City" optional>22        <TextInput autoComplete="address-level2" {...register('city')} />23      </Field>24      <Field label="Postcode" optional>25        <TextInput autoComplete="postal-code" {...register('postcode')} />26      </Field>27    </FieldRow>28  </Fieldset>2930  <Button type="submit">Save details</Button>31</form>3233// Strict on the way in, forgiving on the way out.34// Show an error once the user has left the field; from then on,35// re-check every keystroke so the fix is confirmed immediately.36const showError = (k: string) =>37  !!errors[k] && (touched[k] || submitted)3839// On failure: announce, then move. Doing both at once cuts the40// announcement off mid-sentence.41function handleSubmit(e: FormEvent) {42  e.preventDefault()43  setSubmitted(true)44  const first = Object.keys(errors)[0]45  if (!first) return save()46  setSummaryVisible(true)47  requestAnimationFrame(() => document.getElementById(first)?.focus())48}

<form novalidate>
  <fieldset>
    <legend>Your details</legend>

    <div class="ds-field">
      <label for="email">Email <span class="ds-field__req">*</span></label>
      <p id="email-desc" class="ds-field__desc">Receipts and password resets go here.</p>
      <input
        id="email"
        name="email"
        type="email"
        inputmode="email"
        autocomplete="email"
        required
        aria-describedby="email-desc email-err"
        aria-invalid="true"
      />
      <!-- Stacks under the description; it never replaces it -->
      <p id="email-err" class="ds-field__err">
        That does not look like an email address.
      </p>
    </div>
  </fieldset>

  <!-- Announced on submit failure, before focus moves -->
  <div role="alert" class="ds-form__summary">
    <h2>Two fields need attention</h2>
    <ul><li><a href="#email">Email — that does not look like an email address</a></li></ul>
  </div>

  <button type="submit">Save details</button>
</form>

.ds-form {
  /* One eye span. A field stretched across 1440px is harder to
     use, not easier. */
  max-inline-size: 34rem;
  display: flex;
  flex-direction: column;
  gap: 32px;              /* between groups */
}

.ds-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 16px;              /* between fields — must clearly beat the 6px
                             label gap, or labels look attached upward */
  border: 0;
  padding: 0;
  margin: 0;
}

.ds-field { display: flex; flex-direction: column; gap: 6px; }

.ds-field__desc { font: var(--text-caption); color: var(--ds-fg-muted); }
.ds-field__err  { font: var(--text-caption); color: var(--ds-danger-text); }

/* Two signals, so the state survives greyscale */
.ds-field input[aria-invalid='true'] {
  border-color: var(--ds-danger-border);
}

/* Paired fields, and only where they are one piece of information.
   Below 9rem each they stack — a 5rem field looks broken. */
.ds-field-row {
  display: grid;
  gap: 16px;
}
@media (min-width: 40rem) {
  .ds-field-row { grid-template-columns: repeat(2, 1fr); }
}

/* On a phone the primary action is full width — a right-aligned
   button is in the corner the thumb reaches last. */
.ds-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 39.99rem) {
  .ds-form__actions { flex-direction: column-reverse; }
  .ds-form__actions button { inline-size: 100%; }
}