Input

Examples

Mobile (375)Tablet (768)Desktop (1280)Full

🌙Otwórz w nowej karcie ↗

Domyślny (z Field + hint)

Adres e-mail

Użyjemy go tylko do wysyłki polisy.

Domyślny

import { Field, Input } from "@polisoteka-design/ui";

export function InputBasic() {
  return (
    <Field label="Adres e-mail" hint="Użyjemy go tylko do wysyłki polisy.">
      <Input type="email" placeholder="[email protected]" />
    </Field>
  );
}

export default InputBasic;

Z błędem walidacji

NIP *

Wprowadź poprawny 10-cyfrowy NIP.

Z błędem

import { Field, Input } from "@polisoteka-design/ui";

export function InputInvalid() {
  return (
    <Field label="NIP" required error="Wprowadź poprawny 10-cyfrowy NIP.">
      <Input defaultValue="123-456" />
    </Field>
  );
}

export default InputInvalid;

Usage

Używaj Input przez Field, nie samodzielnie — Field dostarcza etykietę, generowane id, i powiązania a11y (aria-invalid, aria-describedby, aria-required), których sam Input świadomie nie ma (patrz Dostępność niżej). Użycie samego Input bez Field/Label ma sens tylko w kontekstach bez formularza (np. pole wyszukiwarki z widoczną ikoną zamiast etykiety — wtedy aria-label musisz dodać ręcznie).

Nie pokazuj błędu walidacji, zanim użytkownik nie skończył interakcji z polem (nie waliduj on-keystroke od pierwszego znaku) — to reguła UX, nie własność komponentu; Field tylko renderuje błąd, który mu przekażesz.

Content

@todo(S-WYWIAD): mikrocopy komunikatów błędów i hintów (ton, długość, czy zaczynamy od czasownika czy od nazwy pola) — z wywiadu z Human.

API

Input

Nazwa	Typ	Wymagany	Domyślnie	Opis
Brak propsów ponad natywne atrybuty elementu — patrz opis komponentu wyżej.

Field

Nazwa	Typ	Wymagany	Domyślnie	Opis
label	string	tak	—	Treść etykiety powiązanej z kontrolką.
children	React.ReactElement	tak	—	Pojedyncza kontrolka pola (np. <Input />) — dostaje id/aria-invalid/aria-describedby/aria-required przez cloneElement.
error	string	nie	undefined	Komunikat błędu — gdy obecny, kontrolka dostaje aria-invalid i jest powiązana z komunikatem (role='alert').
hint	string	nie	undefined	Podpowiedź pod polem. Pokazywana ZAWSZE, niezależnie od error — gdy oba są podane, oba renderują się jednocześnie i oba trafiają do aria-describedby.
required	boolean	nie	false	Pole wymagane — aria-required na kontrolce + wizualny znacznik '*' przy etykiecie.
id	string	nie	undefined	Nadpisanie wygenerowanego (React.useId) id kontrolki.
className	string	nie	undefined	Klasy na kontenerze pola (div).

Label

Nazwa	Typ	Wymagany	Domyślnie	Opis
Brak propsów ponad natywne atrybuty elementu — patrz opis komponentu wyżej.

Dostępność

Zapewnione przez Field:

• Generuje id (React useId) i wiąże Label przez htmlFor.
• error → aria-invalid + aria-describedby wskazujące na role="alert".
• hint renderuje się ZAWSZE, niezależnie od error — gdy oba są podane, aria-describedby wskazuje na OBA (id połączone spacją), a id/ aria-describedby już obecne na przekazanej kontrolce są respektowane, nie nadpisywane.
• required → aria-required + wizualny * przy etykiecie (aria-hidden, żeby czytnik ekranu nie czytał samej gwiazdki — informację niesie aria-required).

Sprawdź przy użyciu:

• Sam Input bez Field NIE ma żadnego z powyższych — dodaj je ręcznie albo użyj Field.
• Stan błędu sygnalizowany tylko aria-invalid + kolorem obramowania — jeśli Twój formularz pokazuje błędy zbiorczo na górze strony, upewnij się, że tekst błędu przy polu i tekst w podsumowaniu są identyczne (nie tylko kolor prowadzi do pola).

Related

• Button — akcja zapisu formularza.
• Fundamenty → Kolor — color.status.danger użyty w stanie błędu.