Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Dropdown-menu

Anvendes til

Anvend kun dropdown menuer, når det er absolut nødvendigt og kun i tilfælde, hvor brugeren skal vælge mellem 7 til 15 værdier på en begrænset plads.

Anvendes ikke til

  • Lister med færre værdier end 7.
  • Lister med flere værdier end 15. I så tilfælde bør du tilbyde brugeren et felt med auto-forslag, når brugeren begynder at indtaste.

Brug tjekbokse fremfor dropdown menu, hvis brugeren skal vælge mere end 1 værdi.

Brug ikke dropdown-menu til navigation, som den ikke er velegnet til.

Vejledning

Dropdown menuer kræver ekstra aftestning på målgruppen pga. de kognitive udfordringer, de kan afføde.

Undgå at lade brugerens valg i én dropdown menu påvirke indholdet i en anden. Det forvirrer mange brugere.

Hvis du ved, at mange brugere vil vælge den samme værdi i en dropdown menu, så marker den med <option selected="selected">Default</option>. Dermed slipper brugerne for at bruge tid på at gennemsøge listen.

Anvend ikke JavaScript til automatisk at sende den valgte værdi, men sørg for at der er en submit-knap til at sende formularen med.

Sådan (do)

Eksempel på, hvordan en dropdown-menu kan se ud

Sådan: Brug en dropdown-menu, når brugerne skal vælge 1 svar blandt mindst 5 gensidigt udelukkende valgmuligheder (ISO, 2012, afsnit 8.11). Formulér valgmulighederne så kort og konsistent som muligt.

Ikke sådan (don't)

Eksempel på, hvordan en dropdown-menu ikke bør se ud

Ikke sådan: Skjul ikke valgmuligheder i en dropdown-menu, når der kun er nogle få, eller når der er plads til at vise valgmulighederne som radioknapper eller tjekbokse. Dropdown-menuer bør kun bruges, når der ikke er andre muligheder (Wroblewski, 2015) – fx af pladshensyn. Dropdown-menuer er ergonomisk svære at bruge og skjuler brugernes valgmuligheder.

Referencer

Se komponenten i eksempelløsninger

Multiselect og søgning

Vi tilbyder på nuværende tidspunkt ikke en multiselect drop-down komponent med søgefunktion, men hvis man finder eller laver en selv kan det se ud som på billedet nedenfor.

Eksempel på, hvordan en multiselect dropdown kan se ud