Przejdź do treści
Spis treści

Komponenty

Pola formularza

Etykieta zawsze widoczna, wysokość i narożnik takie same jak w przycisku, błąd pod polem z następnym krokiem.

Stan rozdziału:
szkic
Aplikacja dziś:
rozjazd z brandbookiem

Przykład

Z tabliczki znamionowej. Litera O i cyfra 0 to różne znaki.

Wyłączone: ustawia je opiekun placówki.

Pole ma tę samą wysokość i narożnik co przycisk. Etykieta zawsze widoczna. Podpowiedź pod polem, błąd pod polem z role=alert, powiązane przez aria-describedby.

Co już wiadomo

  • Etykieta jest zawsze widoczna i związana z polem przez for; w aplikacji htmlFor jest wymagane, nie opcjonalne (pole.tsx). Placeholder nigdy nie jest etykietą.
  • Wysokość 40 px i narożnik przycisku, żeby pole i przycisk w jednym pasku tworzyły jedną linię.
  • Pole ma min-w-0 obok w-full, bo input ma własną szerokość z atrybutu size i bez tego rozpycha kartę na telefonie (komentarz w pole.tsx, sprawdzone na 390 px).
  • Podpowiedź pod polem mówi, skąd wziąć wartość: „Z tabliczki znamionowej”, „Numer świadectwa albo uprawnienia. Ustawa wymaga odnotowania kwalifikacji przy każdym wpisie”. Podpowiedź jest częścią produktu, nie ozdobą.
  • Błąd stoi pod polem, ma role="alert" i jest powiązany przez aria-describedby. Treść: co jest nie tak plus co zrobić.
  • Ognisko: obrys pola w fiolecie plus miękka poświata 2 px. Ten sam kolor co obrys ogniska przycisku.