Zasada 03

Miejsce na błąd

Formularz, który skacze przy walidacji, karze użytkownika za pomyłkę drugi raz. Slot na komunikat błędu jest częścią layoutu od pierwszego renderu. Pusty również zajmuje swoją wysokość i cierpliwie czeka.

Logowanie: błąd, który niczego nie przesuwa

Wyślij oba formularze puste. Lewy skacze przy każdej walidacji, prawy ma sloty na komunikaty od pierwszego renderu.

✕ Bez rezerwacji

✓ Z rezerwacją

Reguły

Pod każdym polem istnieje slot o stałej minimalnej wysokości na komunikat walidacji.
Globalne błędy (sieć, serwer) mają własny zarezerwowany obszar i nie wypychają przycisków.
Pojawienie się i zniknięcie błędu nie przesuwa żadnego innego elementu.
Komunikat mówi, co zrobić dalej, a aria-live ogłasza go czytnikom ekranu.

Wzorzec w kodzie

Slot pod polem istnieje zawsze, pusty też zajmuje wysokość

<label htmlFor="email">E-mail</label>
<input id="email" aria-invalid={Boolean(error)} />
<p className="min-h-lh text-xs text-red-400">
  {error ?? " "}
</p>

Obszar na błąd global nie wypycha przycisku

<div aria-live="polite" className="flex min-h-11 items-center">
  {serverError && (
    <p role="alert" className="rounded-lg bg-red-500/10 px-3 py-2">
      {serverError}
    </p>
  )}
</div>
<button type="submit">Zapisz</button>