A label komponens segítségével tájékoztathatjuk a felhasználókat, hogy milyen adatokat kell megadniuk a beviteli mezőkben.
A szöveges címke mellett a komponens tartalmazhat kötelező vagy opcionális mező jelölőt, toggletippet és másodlagos szöveget.
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.
A label secondary textjével segítséget vagy extra információt adhatunk a beviteli mező kitöltésével kapcsolatban.
A toggletip használatával adhatunk extra kontextust vagy magyarázatot a beviteli mező kitöltésével kapcsolatban.
Az interakciós állapotok színei a design system sztenderd logikáját követik.
A toggletip tartalmát négy irányba lehet pozíciónálni.
- Minden beviteli mezőhöz tartoznia kell labelnek. Label nélkül a felhasználó nem tudja, milyen adatot kell megadnia.
- A legjobb, ha a beviteli mező fölé, balra pozicionáljuk. Ez megfelel a szkennelve olvasásnak, és azoknak is kényelmes és felfedezhető, akik valamilyen nagyítással böngésznek.
- A label csak nagyon indokolt esetben hagyható el! (Például keresőmezőknél, ahol ikon is jelzi a funkciót.)
- Az asszisztív technológiákkal böngésző felhasználóknak ilyenkor is szükségük van labelre. Ezt vagy aria attribútummal vagy speciális "sr-only" CSS osztállyal kell elérhetővé tenni.
A label gyakorlatilag a beviteli mező címe.
- Pontosan meg kell fogalmaznia, hogy milyen adatot kell megadnia a felhasználónak.
- Minél tömörebbnek kell lennie. 1-3 szónál lehetőleg ne legyen hosszabb.
- Használj főneveket. A kérdések vagy instrukciók általában csak növelik a kognitív terhelést. A hosszú labelek ráadásul zsúfolttá és zajossá tehetik az űrlapokat.
- Legyél minél tömörebb. Előfordulhat, hogy a beviteli mező kitöltéséhez további segítségre, magyarázatra van szükség. Ilyenkor ne a labelt írd túl, inkább kontextuálisan – secondaery texttel vagy toggletippel – adj további információkat a felhasználónak.
- Kezdd a labelt nagybetűvel. (Csak az első szó kezdőbetűje legyen nagy!) Ne használj utána kettőspontot.
A secondary texttel segíthetünk a felhasználónak abban, hogy mit, miért vagy hogyan kell megadnia egy beviteli mezőben.
Bármi is a help text célja, világosnak és tömörnek kell lennie. 1-2 rövid mondatnál ne legyen hosszabb.
- Kezdd nagybetűvel. (Csak az első szó kezdőbetűje legyen nagy!)
- Ha teljes mondatban fogalmaztál, zárd ponttal.
- A secondary text semleges információ, ezért ne használj felkiáltójelet.