Eksempler

Skjule legend visuelt

RadioGroup skal alltid ha en legend. I spesielle tilfeller kan legend skjules visuelt med propen hideLegend, f.eks. i tabeller der feltet får ledeteksten sin fra tabellheaderen. Selv om legend skjules er det viktig at den er meningsfull siden den fortsatt leses av skjermlesere.

Retningslinjer

Antall alternativer

Hvis det er veldig mange alternativer kan det overvelde brukeren. Vurder da om du heller bør bruke Select eller Combobox.

Husk at brukere ikke kan fjerne et valg, bare bytte til et annet. Vurder derfor om du trenger et nøytralt alternativ som "Ingen", "Vet ikke" eller "Ikke relevant".

Orientering som liste

Alternativene skal som hovedregel stilles opp under hverandre i en liste for å gjøre det enkelt å skanne dem. Horisontal visning gjør det vanskelig å lese. Det kan også være problematisk for brukere som må forstørre websiden for å se godt nok (zoom).

Unntak

I noen tilfeller kan det likevel være hensiktsmessig å vise alternativene horisontalt, oftest for å spare plass vertikalt eller når man i et skjema har mange ja/nei-spørsmål etter hverandre. I så fall gjelder følgende:

Vi anbefaler å benytte Stack som vist her:

Rekkefølge

I de fleste tilfellene bør alternativene sorteres alfabetisk. I noen tilfeller kan det være hjelpsomt å ha de mest aktuelle alternativene først, men vær forsiktig så rekkefølgen ikke påvirker svaret eller gjør det vanskelig å finne ønsket alternativ.

Disabled

Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke readOnly, eller bare kan skrive ut informasjonen i ren tekst.

Interaksjon med tastatur

Merk at man bruker piltastene for å ta radiovalg, ikke tab.

Props

Tokens