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.
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.