A number field egész számok megadására szolgáló komponens.
Fejlesztői dokumentáció
Label komponens: A beviteli mező címe. A Label komponens opcionálisan helper textet, toggletipet és a required (kötelező) vagy az optional (nem kötelező) mezőket jelző indikátort is tartalmazhat.
Input field: A beviteli mező teljes interaktív területe.
Number: A felhasználó által megadott szám. Üres, kitöltetlen állapotban placeholder szöveget is tartalmazhat.
Feedback message: A beviteli mező validációs üzenete. A Feedback message komponens error (hiba), warning (figyelmeztetés) vagy success (sikeres vagy helyes) állapotú lehet.
Steppers: A beírt szám növelésére és csökkentésére szolgáló gombok.
A number field két méretben – small és large – használható. A méretet a rendelkezésre álló hely és a felhasználói felület kontextusának megfelelően kell kiválasztani.
Többlépcsős űrlapoknál, főleg mobileszközökön érdemes a large méretet használni.
A komponens loading állapotában a mező jobb szélén egy Loading spinner jelenik meg.
Akkor érdemes használni, ha hosszabb ideig tartó, élő validációt igényel a tartalom.
Error (hiba) állapotban a komponens piros keretet kap. A feedback message a komponens alatt jelenik meg.
Disabled állapotban a komponens és a hozzá tartozó label halványabb, szürke megjelenést kap és nem interaktív.
Read-only állapotban a komponens nem interaktív, de a szöveg kimásolható belőle.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
A number field minimális szélessége – stepper gombokkal együtt – 6rem és 6,5rem. Ez kényelmes aktiválási felületet biztosít mobilfelületeken is.
Ha a beírt szám hosszabb, mint a beviteli mező, akkor a szöveg kifut oldalra, és a mező görgethetővé válik.
A mező teljes területe interaktív, és a hozzátartozó labelre való kattintás is aktiválja azt.
A stepper gombok külön interaktív területet képeznek.
A beírt szám a stepper gombokkal és a billentyűzet le és fel billentyűjével csökkenthető vagy növelhető. A léptetési egység alapesetben 1.
A number fieldhez tartozó szövegírási útmutatók a Label és a Feedback message komponensnél találhatók.
Ha a number fieldnek minimális vagy maximális értéke van, illetve ha a léptetés egysége nem 1, mindig tájékoztassuk a felhasználót, hogy megelőzzük a hibázást.
Ezt a komponenshez tartozó Label helper textjével tehetjük meg.
A number field mindig rendelkezzen alapértékkel. Az alapérték alapesetben 1.
Jól megválasztott alapértékkel megelőzhetjük a hibázást a (kötelező) required mezőknél, és a léptetési egységre is utalhatunk.
A number fieldet kis számok megadására és módosítására használjuk.
10-nél nagyobb vagy széles tartományból választható számoknál általában nem érdemes number fieldet használni, mert a stepper túl sok interakciót igényelne.
Ilyen esetekben Text fieldet használjunk, numerikus beviteli móddal.
Az irányítószámok, bankkártyaszámok, telefonszámok és hasonló adatok számokból állnak, de nem számként értelmezzük őket.
Ilyen esetekben is Text fieldet használjunk, a megfelelő beviteli móddal.
A látható, egyértelmű labelek a number fieldek és az űrlapok használhatóságának kulcsai. Sem az úgynevezett floating labelek, sem a placeholderek, sem a csak ikonokkal jelzett mezők nem helyettesítik a labeleket, és számos használhatósági és akadálymentesítési problémát okoznak.
A labeleket csak nagyon indokolt esetben lehet elrejteni. Ilyenkor gondoskodni kell az akadálymentesítésről, és szakértővel kell validálni az implementációt.
A beviteli mező labelének egyértelműen le kell írnia, hogy milyen adatot várunk a felhasználótól. Ha a label kiegészítésre szorul, helper texttel vagy toggletippel segíthetünk a felhasználónak.
A helper text és a toggletip is helyben, navigálás nélkül elérhető, kontextuális segítség, ezért felfedezhetőbb és gyorsabb megoldás, mint például a súgó.
-
A helper textet a mező kitöltéséhez szükséges információk – például formátum – megjelenítésére használjuk.
-
A toggletip csak interakció után olvasható, ezért csak indokolt esetben, kevésbé fontos kiegészítő információkhoz használjuk.
Csak akkor használjunk helper textet vagy toggletipet, ha valóban szükség van rá! Érdemes felhasználói kutatásokkal vagy tesztekkel felmérni, hogy hol igényel segítséget a felhasználó.
A helper textet és a toggletipet a Label komponens tartalmazza.
A hibaüzeneteket – és a sikeres üzeneteket –, illetve a hozzájuk tartozó részletes útmutatókat a Feedback message komponens tartalmazza. A legfontosabb megfontolások:
-
Mindig jelenítsük meg a hibaüzeneteket! A sikeres üzeneteket elhagyhatjuk, de vegyük figyelembe, hogy így csak egy zöld keret jelzi az állapotot, ami színvak felhasználók számára elveszítheti a szemantikai jelentését.
-
Az üzenetek előtt található ikonok megerősítik a színek szemantikai jelentését, így többek között a színvak felhasználóknak is “megőrzik” azt. Ne hagyjuk el őket!
-
Az üzeneteket kódban asszociálni kell a hozzájuk tartozó mezőkkel. Erről a design system komponensei gondoskodnak.
-
Ne jelezzük túl korán a hibákat. Nem hiba, ha belekattint, majd kitöltés nélkül elhagyja a mezőt a felhasználó, hiszen előfordulhat, hogy csak ismerkedik az űrlappal. Viszont érdemes valós idejű hibakezelést használni azoknál a mezőknél, amiket nem biztos, hogy elsőre helyesen tölt ki a felhasználó.
A kötelező mezőket a label mögötti piros csillaggal jelöljük. Ha minden mező kötelező, elhagyhatjuk a piros csillagot, elég kódban jelölni az asszisztív technológiák számára.
Az opcionális mezőket a label mögötti (Nem kötelező) szöveggel jelöljük. Ha egy űrlap kötelező és opcionális mezőket is tartalmaz, érdemes azt jelölni, amelyikből kevesebb van.
Ezeket a tulajdonságokat a Label komponens tartalmazza.
A beviteli mezőket egymás alá, balra rendezzük. Ez az elrendezés követi a szem természetes mozgását, és a nagyítóval böngészőket is támogatja.
A beviteli mezők több oszlopba rendezése csak akkor elfogadható, ha az egymás mellé rendezett adatok a valóságban is tipikusan így jelennek meg. (Például a vezeték- és keresztnév.)
A beviteli mezőkbe írható karakterek számát (maxlength) csak nagyon indokolt esetben limitáljuk.
Gépelés közben sokan nem nézik a képernyőt, ezért nem veszik észre, ha elérték a limitet. Az adatok bemásolásánál sem egyértelmű a működés, ezért inkább a validációnál kezeljük a karakterszámot.
A komponens a design system kontrasztcélokkal generált szemantikus színeit használja, ezért megfelel az akadálymentesítési követelményeknek. A tokenizálás miatt ez színsémától és sötét vagy világos módtól függetlenül igaz.
A design system sztenderd interakciós állapotainak logikája miatt a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
A kontraszt minimumokat a design system legsötétetebb – sötét módban a legvilágosabb – hátterén generáljuk, emiatt ez az arány minden más használható háttéren ennél csak jobb lehet.
Ha a komponenst nem tokenizált háttérszínen használjuk, manuálisan ellenőrizni kell a kontrasztot!
A komponens állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. Így a színtévesztő vagy színvak, illetve a monokróm kijelzőt használó felhasználók is megkapják a szükséges információkat.
A komponens a Tab billentyűvel fókuszálható, és rendelkezik a design system sztenderd fókuszjelölőjével. A stepper gombok külön-külön fókuszálhatóak és aktiválhatóak az Enter vagy a Space billentyűkkel.
A Le és Fel nyilak a csökkentik vagy növelik a beírt számot.
A komponenshez tartozó egyéb elemek – például a Labelben található ikonok – az Enter vagy Space billenyűkkel is aktiválhatóak és a mezőhöz hasonlóan fókuszálhatóak.
A label, a helper text és a feedback message is asszociálva van a text fieldhez, így ezek mind elérhetőek az asszisztív technológiák számára, beleértve a required indicatort is. (Bővebb dokumentáció a Label komponensben.)
