Wzorzec 02

Formularz bez niespodzianek

Formularz to najgęstsze skupisko mikrointerakcji w interfejsie. Ten wzorzec łączy rezerwację miejsca na błędy z przyciskiem, który podczas wysyłki podmienia etykietę na wskaźnik ładowania, nie zmieniając przy tym swoich wymiarów.

Zaproszenie do projektu

Pola walidują się przy opuszczeniu, a przycisk podczas wysyłki trzyma szerokość, bo etykieta i spinner leżą w tej samej komórce siatki.

Reguły

Pole waliduje się przy opuszczeniu, a komunikat trafia do slotu o stałej wysokości.
Przycisk w stanie ładowania zachowuje szerokość: etykieta i spinner leżą w tej samej komórce siatki.
Potwierdzenie successu pojawia się w obszarze zarezerwowanym od pierwszego renderu.
Wysyłka blokuje podwójne kliknięcie, ale nie zmienia układu ani rozmiaru przycisków.

Wzorzec w kodzie

Etykieta i spinner w jednej komórce siatki, więc szerokość stoi

<button
  disabled={submitting}
  aria-busy={submitting}
  className="inline-grid min-h-11 place-items-center rounded-full px-6"
>
  <span className={submitting ? "invisible" : ""}>
    Wyślij zaproszenie
  </span>
  <span aria-hidden className={submitting ? "" : "invisible"}>
    <Spinner />
  </span>
</button>

Walidacja przy blur i zarezerwowany slot na potwierdzenie

<Input
  label="Adres e-mail"
  value={email}
  error={errors.email}
  onChange={(event) => setEmail(event.target.value)}
  onBlur={() => setFormErrors((state) => ({ ...state, email: validate(email) }))}
/>

<div aria-live="polite" className="flex min-h-11 items-center">
  {submitted && <Confirmation />}
</div>

Textarea rośnie z treścią: field-sizing zamiast skryptu

textarea.autorosnace {
  field-sizing: content;
  min-block-size: 3lh;
  max-block-size: 8lh;
}