A text fielddel rövid szöveges adatokat adhat meg a felhasználó.
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.
Content: A felhasználó által beírt tartalom. Ü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.
Loading spinner: Loading (töltő) állapotban megjelenő animált ikon Loading spinner komponenssel megvalósítva.
A text 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 text field 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.
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.
Error (hiba) állapotban a komponens piros keretet kap. A feedback message a komponens alatt jelenik meg.
Success (sikeres vagy helyes) állapotban a komponens zöld keretet kap. Ha szükséges, ilyenkor is elhelyezhetünk feedback message-et a komponens alatt.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
A text field minimális szélessége 2.25rem és 2.8rem. Ez kényelmes aktiválási felületet biztosít mobilfelületeken is.
Ha a beírt szöveg 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 text fieldnek többféle input típusa van, amelyek mobileszközökön a megfelelő virtuális billentyűzetet nyitják meg.
Text: Szöveges tartalmak bevitelére szolgál.
URL: URL-ek bevitelére szolgál. A virtuális billentyűzet többek között “www” és “.com” gombokkal egészül ki.
Phone: Telefonszámok bevitelére szolgál. A virtuális billentyűzet csak számokat fog tartalmazni.
Email: E-mail címek bevitelére szolgál. A virtuális billentyűzet többek között “@” és “.com” gombokkal egészül ki.
Password: Jelszavak bevitelére szolgál, a bevitt karakterek rejtettek. Jelszavaknál inkább a Password field komponenst használjuk.
Number: Számok bevitelére szolgál. Számos használati és akadálymentesítési problémát okoz, ezért inkább a Number field komponenst használjuk. (Ha mégis text fieldet használunk, akkor adjunk rá inputmode="numeric" és pattern="[0-9]*" attribútumokat.)
A text fieldhez tartozó szövegírási útmutatók a Label és a Feedback message komponensnél találhatók.
A text field rövid szöveges adatok megadására szolgál. Hosszabb szövegekhez a Textarea komponenst használjuk.
Számok megadására a Number field, jelszavak megadására a Password field komponenst használjuk.
Ha adott lehetőségek közül választhat a felhasználó, a Select vagy a Combobox komponenst használjuk.
Egyszerű, gyakran használt adatok – például születési dátum – megadásához érdemes egyszerű beviteli mezőket használni komplex komponensek helyett.
A látható, egyértelmű labelek a text 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ő szélességének tükröznie kell a tartalom várható hosszát. (Például az irányítószám beviteli mezője olyan széles legyen, hogy 4 karakter férjen el benne.)
Nem javasolt azonos szélességűre állítani az űrlap összes beviteli mezőjét. Esztétikailag kiegyensúlyozottabbnak tűnhet a felület, de használhatósági problémákat okozhat.
-
A szükségesnél szélesebb beviteli mezők azt sugallják, hogy a felhasználónak a ténylegesnél hosszabb adatot kell megadnia.
-
A szükségesnél keskenyebb beviteli mezők a ténylegesnél rövidebb adatra utalnak, és frusztráló a használatuk.
Mindig a megfelelő beviteli mező típust (input mode-ot) használjuk, hogy mobileszközökön a megfelelő billentyűzet jelenjen meg.
Érdemes kerülni az adatok több beviteli mezőre bontását. (Pélául ne bontsuk több beviteli mezőre a szóközökkel elválasztott bankkártyaszámot.)
Az “input maszkolás” és az automatikus léptetés több mezőnél nehezen akadálymentesíthető megoldások, és sok felhasználó számára ismeretlen lehet a működésük, ezért ezeket kerüljük.
Bizonyos esetekben – például nemzetközi dátumoknál – a validáció nem egyértelmű, ha csak egyetlen beviteli mezőt használunk. Ezeket érdemes szétbontatni.
Emlékezetes dátumoknál – például születési dátumnál – nem érdemes dátumválasztót használni. A felhasználók három különálló beviteli mezőben gyorsabban meg tudják adni a dátumot.
A nem mindenki számára egyértelmű vagy nehezebben kitölthető mezőknél – például jelszó beállításánál – adjunk segítséget a helyes kitöltéshez például a Label komponens helper textjével. Ne bízzuk csak a hibaüzenetre a tájékoztatást!
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 beviteli mezőket érdemes úgy paraméterezni, hogy támogassák a böngészők automatikus kiegészítését és a jelszókezelőket (autofill). Ez sok felhasználónak segít, és csökkenti az elírásokból fakadó hibákat.
Azoknál a beviteli mezőknél, ahol nyelvtanilag helytelen adatokat várunk el – például e-mail címeknél vagy felhasználóneveknél – az autocapitalize="none", autocorrect="off" és a spellcheck="false" attribútumokat használjuk. Így a böngészők nem fogják korrigálni a beírt értékeket.
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 fókuszálható a Tab billentyűvel és rendelkezik a design system sztenderd fókuszjelölőjével. Fókuszáláskor a teljes szöveg kijelölésre kerül.
A sztenderd szövegbeviteli módosítók – például a sor elejére ugrás – Ctrl vagy Option billentyűvel is használhatóak.
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.)
