Komponenta NumberInput umožňuje uživatelům zadávat a upravovat číselné hodnoty (např. měnu, procenta nebo částky).
WCAG 2.2Klávesnice
Anatomie
Label: Textový popisek pole, který uživateli jasně říká, jaký typ hodnoty zadat.
Input field: Kontejner pro zadávání textu.
Value: Formátovaná číselná hodnota zarovnaná podle nastavení.
Input description: Pomocný text pod vstupním polem, který slouží k zobrazení dodatečných instrukcí nebo chybových hlášení.
Left / Right Addon: Sekce na začátku a na konci pole určená pro ikony, symboly nebo akční tlačítka.
Varianty
Base: Standardní textové pole pro přímé zadávání čísel z klávesnice.
isCounter: Varianta transformující pole na počítadlo. Po stranách (nebo uvnitř pole) se zobrazí ovládací tlačítka s předdefinovanými ikonami pro inkrementaci a dekrementaci (plus/minus) a hodnota se vycentruje.
Stavy
Komponenta NumberInput využívá následující vizuální a funkční stavy:
Base (Výchozí): Pole je připraveno k interakci, uživatel do něj dosud neklikl.
Hover: Aktivuje se při najetí kurzorem myši nad komponentu, indikuje interaktivitu.
Focus: Stav, kdy uživatel do pole kliknul nebo do něj přejel pomocí tabulátoru. Pole je připraveno pro zápis.
Disabled: Pole je zašedlé a zcela neaktivní. Uživatel nemůže měnit hodnotu ani do pole kliknout. Data se neodesílají ve formuláři.
ReadOnly: Hodnotu lze přečíst a zkopírovat, ale nelze ji editovat. Vizuálně se liší od stavu disabled (zůstává lépe čitelná).
Danger: Používá se při nevalidním zadání (např. číslo mimo povolený rozsah). Pole má červené ohraničení a je doplněno chybovou hláškou v description.
Success: Indikuje úspěšné ověření specifické byznys podmínky (např. schválená částka).
Properties komponenty
variant: Určuje základní styl zobrazení komponenty.
labelText: Text hlavního popisku nad komponentou.
value: Aktuální zobrazená hodnota uvnitř pole.
placeholder: Zástupný text, který se zobrazí, pokud je pole prázdné.
description: Text nápovědy či popisu zobrazený pod vstupním polem.
textAlign: Zarovnání textu uvnitř pole (výchozí pro finanční částky je end).
isCounter: Input pro krokem řízené zvyšování nebo snižování hodnoty.
leftAddonContent: Obsah vložený před číselnou hodnotu.
rightAddonContent: Obsah vložený za číselnou hodnotu.
required: Určuje, zda je pole povinné pro odeslání formuláře.
optional: Pokud je true, vykreslí text (volitelné) vedle labelu.
tooltip: Text nápovědy, který se zobrazí v bublině při najetí na label.
UX writing
Formátování čísel: Pro českou lokalizaci vždy oddělujte tisíce pevnou mezerou a desetinná místa čárkou (např. 1 250,50 Kč, nikoliv 1,250.50).
Zarovnání textu (textAlign): Finanční částky a procenta vždy zarovnávejte doprava (end), usnadňuje to vizuální porovnávání čísel pod sebou v tabulkách a formulářích. Obecné počty (např. ID, věk, dny) mohou být zarovnány doleva (start).
Chybové hlášky: Pokud hodnota například neodpovídá limitům min / max, v textu description jasně uveďte správné rozmezí (např. "Částka musí být mezi 100 Kč a 50 000 Kč.").
Jak používat
Komponenta nereaguje na vkládání jiných než číselných znaků. Vždy použijte label, který zcela jasně sděluje, že od uživatele se očekává vkládání číselné a ne textové hodnoty.
Používejte rightAddonContent pro jednoznačné určení jednotek (CZK, EUR, %, kg...).
Pro pole typu „Věk“ a pod. využijte vlastnost isCounter = true, která zrychluje zadávání na dotykových obrazovkách.
Částky zarovnávejte vpravo (end) a PSČ vlevo (start).
Jak nepoužívat
Nepoužívejte variantu isCounter pro zadávání velkých čísel (např. finanční částky, roční příjmy), kde by uživatel musel na tlačítko kliknout stokrát. Tam patří klasický base režim s přímým zápisem.
