Select

Retningslinjer for bruk

Bruk select når

• du skal presentere mange alternativ der bare ett kan velges
• du ønsker å unngå at lange lister med alternativer blir overveldende
• du trenger å få plass til flere alternativer på liten plass

Unngå select når

• du har få valg og god plass (bruk heller radio button)
• brukeren kan velge mer enn ett alternativ (bruk heller checkbox)
• du har strukturerte alternativer med nok plass er det bedre å liste ut alle valgene

Antall og tilgjengelighet

Select fungerer best når du har mange alternativer, men bare ett skal velges. Har du færre enn fem valg, er radioknapper ofte bedre fordi valgene blir mer synlige og enklere å sammenligne.

Lange lister kan være utfordrende for brukere med skjermleser, og det finnes kjente tilgjengelighetsproblemer med select-komponenten (les mer under “Research about this component” på gov.uk).

Vurder om du kan forenkle spørsmålet slik at det blir færre alternativer. Hvis det gir mening, bruk radio button for å gi en bedre opplevelse.

Gjør slik

Bruk select når du har mange alternativer

Unngå

Unngå select ved få alternativer

Sortering av alternativer

Det er viktig å liste ut elementene dine på en oversiktlig måte, om det så er alfabetisk, tidsbasert eller en annen logisk rekkefølge.

Gjør slik

Sorter alternativene i en logisk rekkefølge

Unngå

Unngå å liste alternativer i ulogisk rekkefølge og å bruke forskjellige måter å skrive alternativene

Bruk select til riktig formål

Select passer best til ryddige, relaterte lister. Ikke bruk den til å velge innhold som egentlig krever et annet format, som adresse eller telefonnummer.

Gjør slik

Bruk select til lister med relatert innhold

Unngå

Unngå select for innhold som bør velges på en annen måte

Label, hjelpetekst og plassholder

En label skal være kort og presis, helst mellom ett og tre ord. Unngå kolon på slutten og bruk verken kun store eller kun små bokstaver.

Plassholder skal aldri være eneste instruksjon. Den forsvinner når brukeren gjør et valg, og er ikke alltid tilgjengelig for skjermlesere. Bruk heller label og/eller hjelpetekst for å gi nødvendig veiledning.

Les mer om innhold i skjemaelementer i input wrapper-dokumentasjonen og om god praksis for skjemaer.

Universell utforming

• Alle felt skal ha en tilknyttet label, også hvis den skjules visuelt (pkt-sr-only).
• Feilmeldinger skal være kodet som tekst og knyttet til det spesifikke feltet.
• Select kan være utfordrende for skjermlesere ved veldig lange lister, vurder alternativer som radio button eller combobox om det gir bedre opplevelse.