DokumentacjaKomponenty
Pole tekstowe
Etykieta nad polem, podpowiedź i błąd pod nim, powiązane dla czytników.
Adres e-mail Podaj poprawny adres e-mail
- 1Etykieta: Inter 16 px / 500, zawsze widoczna nad polem
- 2Pigułka: min. wysokość 44 px, ramka 2 px, token tła pola
- 3Wartość 14 px; placeholder w tokenie muted, jako przykład formatu
- 4Linia komunikatu pod polem: błąd (destructive) albo podpowiedź
Warianty
Jedno pole i trzy miejsca wokół niego. W produkcie formularze stoją na białych kartach, więc przykłady też.
Organizator napisze tylko w sprawie tej rezerwacji.
Stany
Fokus jest poniżej wymuszony, żeby było go widać bez klawiatury; pola wyżej reagują na prawdziwy fokus. Pole nie ma stanu hover: służy do pisania, nie jest przyciskiem.
Podaj poprawny adres e-mail
API
Propsy TextField. Pole hasła i pole kodu SMS są zbudowane na nim.
| Prop | Typ | Domyślnie | Opis |
|---|---|---|---|
id | string | – | Wymagane. Łączy etykietę z polem i tworzy id błędu. |
label | string | – | Wymagane. Widoczna etykieta nad polem (16 px, 500). |
error | string | null | – | Komunikat pod polem; ustawia aria-invalid i jest ogłaszany (role alert). |
invalid | boolean | – | Oznacza pole jako złe bez własnego komunikatu, np. gdy wyjaśniają to reguły w podpowiedzi. |
hint + hintId | node + string | – | Treść pod polem (np. reguły hasła), powiązana przez aria-describedby. |
labelAside | node | – | Prawa strona wiersza etykiety, np. paski siły hasła. |
trailing | node | – | Miejsce na końcu pigułki, np. przełącznik pokazania hasła. |
…atrybuty input | type, value, placeholder, disabled… | – | Każdy natywny atrybut pola przechodzi dalej. |
Dostępność
- Etykieta jest wymagana przez API i powiązana z polem (for / id); placeholder jej nie zastępuje.
- Błąd ustawia aria-invalid, jest powiązany przez aria-describedby i ogłaszany jako alert; podpowiedź dołącza do tego samego opisu.
- Fokus: ramka w tokenie ring i pierścień 3 px przy 50 %. Błąd: ramka i tekst destructive, nigdy sam kolor (komunikat mówi, co poprawić).
- Kontrast: wartość 19,3:1, placeholder 7,2:1 na tle pola; tekst błędu 4,8:1 na białej karcie.
- Uczciwie: tekst błędu spada do 4,4:1 bezpośrednio na liliowym tle strony, a ramka spoczynkowa (slate-200) ma 1,2:1 na białej karcie, poniżej 3:1 z WCAG 1.4.11. Rekomendacja: formularze trzymać na kartach, a ramce spoczynkowej dać token border-strong (slate-500, 4,8:1), żeby pole było widać przed fokusem.
- Przełącznik hasła to przycisk 44 px z własną etykietą i aria-pressed.
Dobre praktyki
Adres e-mail