Field

Popsané textové pole: popisek, nápověda, chyba, jednotka. Pro ruční formuláře, které pole nemají odkud odvodit.

Kdy použít

Formulář se píše rukou a má pár daných polí — název tokenu, počet kusů, e-mail. Přesně tam, kde by jinak vznikl další ruční pár <label> + <input>.
K hodnotě patří jednotka nebo měna. Ta jde do affix, nikdy do placeholder — placeholder zmizí, jakmile uživatel začne psát, a s ním i to, v čem se ta hodnota měří.
Pole má validaci, kterou uživatel uvidí. error zapne error stav i aria-invalid jedním textem, takže se nedá udělat červené pole bez vysvětlení.
Hodnota se čte po sloupcích nebo je to kód — mono přepne na mono a tabular-nums.

Kdy nepoužít

Pole vznikají ze schématu (konfigurace integrace, per-uzlové nastavení operace). Tam patří IngotForm nad IngotFieldSpec[]: pole, která nikdo neopsal rukou, se nemůžou se schématem rozejít. Tahle komponenta je opačná větev — rukou psaný formulář, kde žádné schéma není.
Potřebuješ jen samotný vstup bez popisku, protože si popisek stránka skládá sama. To je IngotFieldInput.
Hodnota se jen ukazuje a nejde měnit. Zamčený vstup tvrdí „tohle je pole“ a uživatel do něj bude klikat; použij popis a hodnotu (<dl> / <dt> / <dd>), ne disabled. To je pro pole, které se ODEMKNE — dočasně, ne navždy.
Vstup není text: zaškrtávátko, výběr z množiny, datum. První verze je schválně jen textová — primitivum bez konzumenta je nezapojený slib.

Vlastnosti

type: "text" | "number" | "password" | "email" | "url" | "tel" | "textarea" — Jakou klávesnici a masku nabídne prohlížeč. textarea je totéž pole na několik řádků.
rows: number — Výška textarea v řádcích. Ostatní typy ji ignorují.
counterMax: number — Měkký počet znaků pod polem („128 / 160“). Text neusekne — limit hlídá server.
label: ReactNode — Podstatné jméno bez dvojtečky („Počet kusů“).
value: string — Řízená hodnota vstupu.
onChange: (next: string) => void — Dostane rovnou text, ne událost.
hint: ReactNode — Celá věta s tečkou pod polem.
error: ReactNode — Text chyby. Jeho přítomnost zapíná error stav i aria-invalid.
affix: ReactNode — Jednotka nebo měna uvnitř rámečku („ks“, „%“).
mono: boolean — Mono a tabular-nums pro kódy a čísla.
optionalLabel: ReactNode — Přeložené „— nepovinné“ vedle popisku.
placeholder: string — Příklad hodnoty, nikdy popisek ani jednotka.
required: boolean — Nativní required vstupu.
disabled: boolean — Dočasně zamčené pole — ne způsob, jak ukázat hodnotu.
labelPlacement: "stacked" | "side" — Kde stojí popisek. `stacked` (výchozí) nad polem — tvar formuláře, kde jsou pole tím hlavním na obrazovce. `side` ve sloupci vlevo, což chce stránka nastavení: tam je popisek otázka a pole krátká odpověď, a formulář pod sebou nutí čtenáře číst cikcak. Pod `md` se `side` vrací k `stacked` — sloupec s popisky na telefonu nechá poli asi 150 px.
testId: string — data-testid vstupu, ne obalu — testy sahají na to, co se ovládá.