A switch segítségével két lehetséges állapot közül választhatnak a felhasználók. Jellemzően egy funkció ki- és bekapcsolására használjuk.
Fejlesztői dokumentáció
Input: A switch állapotát mutató elem, amely lehet kiválasztott vagy nem kiválasztott.
Label: A switch által vezérelt beállítás 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 switch 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 swtichek 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 switchek csoportosíthatóak, és ilyenkor group label tartozik hozzájuk. A group label egy Label komponens, annak minden opciójával.
Az input lehet a label előtt (leading) vagy mögött (trailing).
Mobilfelületeken érdemes a platform sztenderdeket követni, és a label mögé pozicionálni az inputot.
A switch bekapcsolt (selected) és kikapcsolt (not selected) á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.
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ó.
Checkbox helyett switchet használunk, ha a felhasználó választásának – a funkció ki- vagy bekapcsolásának – azonnali hatása van.
Radio button helyett switchet használunk, ha a felhasználók két lehetséges állapot – be- és kikapcsolás, engedélyezés és tiltás – közül választhatnak. Radio buttonnél több állapot is lehetséges.
A switcheket 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 switcheket főszabály szerint egymás alá rendezzük. Az egymás mellé rendezett switcheket 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.
A switch labelének tömören és egyértelműen meg kell neveznie a switch által vezérelt beállítást. Lehetőleg 1-3 szó legyen.
Ha a label magyarázatra szorul, helper texttel vagy toggletippel adhatunk kiegészítő információkat.
Általában főnevet használunk (pl. Sötét mód), és elhagyjuk a switch állapotára utaló igenevet (pl. bekapcsolása).
Csak akkor használunk igenevet is, ha egyértelműbbé teszi a switchet!
-
Nagy kezdőbetűvel kezdjük.
-
A switch labele általában nem teljes mondat, ezért nem használunk mondatvégi írásjeleket.
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 állapotai és kiegészítő elemei nem kizárólag színnel közlik az információt. A bekapcsolt állapot egyértelműsítésére ikont is használunk.
Í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 switchek állapotát a Space vagy az Enter billentyűvel lehet változtatni.
A switch group fieldset és legend elemek segítségével implementált.
