Radioknapp

Radioknapp (Radio button) används när användaren ska göra ett val bland alternativ i en lista och endast ett alternativ får väljas.

Visuella exempel

Överskrift till valen

Ui-kittet

Radioknapp

Riktlinjer

  • Radioknappar ska alltid ha etikett till höger. Både radioknapp och etiketten ska vara klickbar.
  • Radioknapp måste vara i grupp (minst två). Ovanför radioknapparna ska det finnas en överskrift (legend).
  • En radioknapp kan vara förvald.
  • Presentationen av radioknappar ska primärt göras vertikalt.
  • Ett val i en radioknapp innebär att alla övriga radioknappar i listan sätts i läget icke-vald.
  • Undvik inaktiva radioknappar.
  • Gör radioknappar med tillräckligt stort avstånd med tanke på klickyta.

Bra att tänka på

  • Om de valbara alternativen är fler än 5-7, bör man överväga om en dropdown är ett bättre alternativ.
  • Om det finns behov av ett icke-val så ska detta vara en egen radioknapp. Användaren ska i dessa fall alltid kunna ångra ett val och återgå till ursprungsläget.
  • Avståndet mellan radioknappen och etiketten till höger får inte vara för stort. Det ska tydligt framgå att de hör ihop.
  • Var tydlig med texten i överskrift och etiketterna så det klart framgår vad användaren väljer.
  • Tänk på ordningen som radioknapparna presenteras i. Till exempel att presentera dem med det troligaste valet högst upp och i fallande ordning.
  • Använd inte radioknapp som en action/exekvera-funktion.

Tillgänglig komponent

  • Det ska gå att tabba sig till radioknapparna.
  • Piltangenterna ska kunna användas för att navigera mellan radioknappar.