A checkbox segítségével egy vagy több lehetőséget választhatnak ki a felhasználók.
Fejlesztői dokumentáció
Input: A checkbox állapotát mutató elem, amely lehet kiválasztott, nem kiválasztott vagy meghatározatlan.
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 checkbox csoport 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 checkboxok kaphatnak 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 háttérrel rendelkező checkboxok kaphatnak keretet. A keretes verziót akkor használjuk, ha a hátteres verziót fehér alapon szeretnénk helyezni.
A checkboxok két méretben – small és large – használhatóak.
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 checkboxokat általában checkbox csoportokban használjuk, és group label is tartozik hozzájuk. A group label egy Label komponens, annak minden opciójával.
A group label csak kivételes esetekben hagyható el, ha a kontextus egyértelműen utal rá, milyen műveletet hajt végre a felhasználó a checkbox kiválasztásával.
A checkbox not selected (nem kijelölt) és selected (kijelölt) állapot mellett indeterminate (határozatlan) állapotú is lehet.
Az indeterminate állapotot akkor használjuk, ha egy “szülő” checkbox néhány, de nem az összes “gyermek” opcióját jelölte be a felhasználó.
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 – például el kell fogadnia egy feltételt –, vagy ha az előző kiválasztás érvénytelenné vált.
Checkbox csoportok esetén a hibaüzenet a csoport alján jelenik meg és minden checkbox error állapotot kap.
Checkbox csoport esetén a required indikátor a group label része.
Egyetlen checkbox esetén – például az Általános szerződési feltételek elfogadásánál – a required indikátor a label mögött jelenik meg.
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 a checkboxra vagy a labelre kattintva aktiválható.
10-nél több lehetőségnél érdemes más komponenst, például Dropdownt használni.
10-nél kevesebb lehetőségnél mindig checkboxot használjunk. A checkboxnál minden opció látható, ezért sokkal kisebb a kiválasztás interakciós költsége, mint más komponenseknél.
Ha csak egy lehetőséget választhat ki a felhasználó, a Radio button komponenst használjuk.
A Switchet jellemzően egy funkció ki- és bekapcsolására használjuk. A kiválasztásnak azonnali hatása van.
A checkboxokat és a checkbox csoportokat 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 checkboxok egymásba ágyazhatók.
A “szülő” checkbox kijelölésével a beágyazott “gyermek” checkboxok automatikusan selected (kijelölt) állapotúak lesznek. A kijelölés törlésével a beágyazott “gyermek” checkboxok not selected (nem kijelölt) állapotúak lesznek.
Egy “gyermek” checkbox kijelölésével a “szülő” checkbox automatikusan indeterminate (határozatlan) állapotú lesz. Ha egy “gyermek” checkbox kijelölését töröljük, a “szülő” checkbox szintén indeterminate (határozatlan) állapotú lesz.
Ha az összes “gyermek” checkbox kijelölését töröljük, a “szülő” checkbox not selected (nem kijelölt) állapotú lesz.
A checkboxokat főszabály szerint egymás alá rendezzük. Az egymás mellé rendezett checkboxokat 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 checkboxokat, és csak 1-2 opció van.
Teljes mondat helyett a checkbox 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.
A checkbox kötelező, de egy lehetőséget sem választott ki a felhasználó:
-
Válassza ki [az adatot / információt]!
-
Válassza ki a település típusát!
Túl sok lehetőséget választott ki a felhasználó:
-
Legfeljebb [valamennyi adatot / információt] válasszon ki.
-
Legfeljebb 3 közlekedési eszközt válasszon ki.
Túl kevés lehetőséget választott ki felhasználó:
-
Legalább [valamennyi adatot / információt] válasszon ki.
-
Legalább 2 megyét válasszon ki.
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 komponens fókuszálható a Tab billentyűvel és rendelkezik a design system sztenderd fókuszjelölőjével. A checkboxok állapotát a Space billentyűvel lehet változtatni.
A checkbox csoportok fieldset és legend elemek segítségével implementáltak.
