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;
}

Prompt dla Claude

Wklej do Claude Code w swoim projekcie. Prompt niesie komplet reguł tej lekcji i ogólne zasady Liquid Design, więc implementacja trafia w metodologię bez tłumaczenia jej od zera.

Prompt do wklejenia

Zaimplementuj w moim projekcie wzorzec „Formularz bez niespodzianek" z metodologii Liquid Design.

Walidacja przy opuszczeniu pola, przycisk o stałej szerokości podczas wysyłki i potwierdzenie w zarezerwowanym slocie.

Wymagania:
- 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.

Ogólne reguły Liquid Design, których implementacja nie może złamać:
- HTML jest semantyczny: button, a, nav, form, label, dialog, details, ul, dl i nagłówki h1-h6 zamiast div z onClick i ARIA dopisywanym ręcznie. div i span służą wyłącznie do layoutu, nigdy do interakcji ani struktury treści.
- Layout jest umową: treść, która dociera później, ma miejsce zarezerwowane od pierwszego renderu. Nic nie skacze.
- Stany ładowania, pustki, błędu i treści dzielą jeden layout.
- Typografia pochodzi z nazwanej, płynnej skali opartej o clamp(), nie z gołych rozmiarów.
- Animacje dotyczą wyłącznie transform i opacity, a prefers-reduced-motion redukuje je do natychmiastowej zmiany stanu.
- Breakpoint jest ostatecznością: najpierw container queries i repeat(auto-fit, minmax(...)).

Sposób pracy – zanim napiszesz pierwszą linię kodu:
- Sprawdź w plikach projektu, jak stylowane są komponenty (Tailwind, CSS Modules, vanilla-extract, styled-components, Sass, czysty CSS...) i pisz wyłącznie w tej konwencji. Niczego nie zakładaj z góry i nie dodawaj nowych zależności.
- Wymagania powyżej opisują właściwości CSS i atrybuty HTML, nie klasy narzędziowe. Przełóż je na system stylowania zastany w projekcie.
- Sprawdź framework komponentów, wersję i konwencje nazewnictwa, zamiast zakładać konkretny stack.
- Używaj istniejących tokenów projektu (kolory, typografia, odstępy). Jeśli czegoś brakuje, zaproponuj minimalne uzupełnienie w duchu istniejącego kodu, nie osobny system.
- Nie używaj klas, tokenów ani API, których nie znalazłeś w tym projekcie.

Pełny opis z żywym demo i kodem: https://liquid-design.website/wzorce/formularze