A radio button segítségével több – egymást kizáró – lehetőség közül egyet választhatnak ki a felhasználók.
Fejlesztői dokumentáció
Input: A radio button állapotát mutató elem, amely lehet kiválasztott vagy nem kiválasztott.
Label: A kiválasztható lehetőség neve.
Secondary text: Másodlagos vagy kiegészítő információk megjelenítésére használható szöveg. (opcionális)
Group label: A radio group címe. Egy Label komponens, amely opcionálisan helper textet, toggletipet és a required (kötelező) vagy az optional (nem kötelező) mezőket jelző indikátort is tartalmazhat.
A radio button kaphat hátteret. A háttér bizonyos kontextusokban – például mobilfelületeken – hangsúlyosabb megjelenést és nagyobb aktivációs felületet biztosít.
A radio button 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. Alapesetben a small méretet használjuk.
A secondary texttel másodlagos vagy kiegészítő információkat – például név-érték pár vagy labelhez fűzött magyarázat – jeleníthetünk meg.
A label alatt jelenik meg, vizuálisan kevésbé hangsúlyos.
A radio buttonokat mindig csoportokban használjuk, és group label is tartozik hozzájuk. A group label egy Label komponens, annak minden opciójával.
A radio button not selected (nem kijelölt) és selected (kijelölt) állapotú lehet.
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) állapottal jelezzük, ha a felhasználónak kötelező választania a továbblépéshez, vagy ha az előző kiválasztás érvénytelenné vált.
A hibaüzenet a radio group alján jelenik meg és minden radio button error állapotot kap.
A komponens a design system sztenderd interakciós állapotainak logikáját követi.
Ha a label szövege hosszabb, mint a rendelkezésre álló hely, akkor több sorba törik.
A komponens az inputra vagy a labelre kattintva aktiválható.
Ha több lehetőséget is kiválaszthat a felhasználó, a Checkbox komponenst használjuk.
Túl sok opciónál a vizuális zaj már nagyobb kognitív terhelést jelenthet, mint amekkorát egy bonyolultabb komponens használata okoz. 10-nél több lehetőségnél érdemes más komponenst, például Dropdownt használni.
A Switchet jellemzően egy funkció ki- és bekapcsolására használjuk. A kiválasztásnak azonnali hatása van. Radio button esetén több lehetőség is megadható.
A radio buttonoknak tömörnek és könnyen összehasonlíthatónak kell lenniük. Ha további információkkal, illusztrációkkal vagy linkekkel is támogatni szeretnénk a felhasználók döntését, érdemes inkább Cardot használni.
A radio buttonokat a többi űrlapelemmel együtt 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 radio buttonokat főszabály szerint egymás alá rendezzük. Az egymás mellé rendezett radio buttonokat a nagyító szoftverrel böngésző felhasználók nehezebben fedezik fel, ezért akadálymentesítési szempontból problémát jelentenek.
Az egymás mellé rendezés csak akkor elfogadható, ha szűrésre használjuk a radio buttonokat, és csak egy-két opció van.
Alapértelmezett értéket akkor adunk meg, ha tudjuk, hogy melyik lehetőséget fogják nagyobb valószínűséggel választani a felhasználók. Az alapértelmezett radio buttont érdemes az első helyre sorolni.
Teljes mondat helyett a radio button labele lehetőleg 1-3 szóból álljon. Ha mégis teljes mondatban fogalmaztunk, töröljük a töltelékszavakat és kerüljük a többszörösen összetett mondatokat.
A kontextuson belül ügyelni kell az egységes fogalmazásra. A labelek szóhasználata és hossza is legyen hasonló.
-
Nagy kezdőbetűvel kezdjük.
-
Csak akkor használunk mondatvégi írásjelet, ha teljes mondatban fogalmaztunk.
A hibaüzenetekre vonatkozó szövegírási útmutatók a Feedback message komponensnél találhatók.
Ha a radio button kötelező, de nem választott a felhasználó:
-
Válassza ki [az adatot / információt]!
-
Válassza ki az ügyintézés nyelvét!
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 komponens a design system sztenderd interakciós állapotainak logikáját követi, ezért a kontrasztcélok a komponens minden interaktív állapotánál biztosítottak.
A kontraszt minimumokat a design system legsötétebb – sötét módban a legvilágosabb – hátterén generáljuk, ezért 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 Tab billenytűvel az egész radio group komponens fókuszálható. Az első elem kijelölt állapotot kap. A következő Tab kimozgatja a fókuszt a radio groupból. A radio buttonok között a kurzor billentyűkkel lehet váltani.
A radio buttonok rendelkeznek a design system sztenderd fókuszjelölőjével.
A radio group fieldset és legend elemek segítségével implementált.
