Kryssruta

Kryssruta (Checkbox) används för att ge möjlighet till valfritt antal val mellan olika alternativ. Kryssruta kan också användas som ett ensamt element för att ge valmöjlighet till av/på-läge.

Visuella exempel

Överskrift till valen

Ui-kittet

Kryssruta

Riktlinjer

  • En kryssruta ska alltid ha en etikett till höger om kryssrutan.
  • Både kryssrutan och etiketten ska vara klickbara.
  • En kryssruta har två lägen – vald eller inte vald.
  • Kryssrutan kan vara förvald.
  • När flera kryssrutor presenteras tillsammans så behöver de ha en överskrift (legend) så att det blir tydligt vad användaren tar ställning till. Kryssrutorna bör då presenteras vertikalt.
  • Att göra ett val i en kryssruta påverkar inte någon av de övriga kryssrutorna.
  • Undvik inaktiva kryssrutor.

Bra att tänka på

  • Avståndet mellan kryssrutan och etiketten till höger om kryssrutan får inte vara för stort. Det ska tydligt framgå att de hör ihop.
  • Avståndet mellan kryssrutor bör vara tillräckligt stort för att vara en bra klickyta oavsett enhet.
  • Var tydlig i texten så det framgår för användaren vad alternativet innebär.
  • Om många kryssrutor presenteras i en lång lista, fundera på om de kan grupperas i sub-grupper för ökad tydlighet.
  • Använd inte kryssruta som en action/exekvera-funktion.

Tillgänglig komponent

  • Etiketten ska vara tydlig och beskriva alternativet.
  • Klick på etiketten ger samma resultat som klick i kryssrutan.
  • Det ska gå att fylla i en kryssruta med mellanslagstangenten.
  • Användaren navigerar mellan kryssrutor med tabb-tangenten.