Hopp til innhold

Nedtrekkslister

Dropdown lar brukeren velge mellom ulike skjemadata

Bruk av nedtrekkslister

Vi har to typer dropdown: en søkbar dropdown og en vanlig dropdown hvor brukeren kan velge mellom ulike skjemadata. Dropdowns kan ofte bli brukt feil, spesielt på mobil kan dropdowns med lange lister og mye scrolling gi dårlig brukeropplevelse. Hvis du er i tvil kan det være en god idé å brukerteste løsningen.

SearchableDropdown

Har du 10 eller flere alternativer i nedtrekkslisten din, anbefaler vi at du bruker nedtrekkslisten med søk. Det er for å gjøre det enda enklere for brukerne å finne det de er på jakt etter.

Varianter

Hvis du vil vise mer enn en type informasjon, kan du legge det til i dropdownAttributes

Du kan også tilpasse listen sånn du vil, ved å sende med et element til listElementBody

Vil du lage din egen søkemetode kan du gjøre det også. For eksempel om du vil ignorere mellomrom.

Hvis du ikke får noen resultater på søket ditt, men forsatt ønsker å gi brukerne noen forslag, kan du legge til ekstra søkeresultater

Vil du bestemme hvilket element som er valgt, kan du bruke selectedItem

Dersom du ønsker å ha ekstra tekst på bunnen av lista, kan du bruke postListElement

Dropdown er en vanlig nedtrekksliste som kan brukes man når man har 5-10 valg å velge mellom. Har du mindre enn 5 valg, bruk radio buttons istedenfor.

Dersom skjemaet inneholder valideringsfeil vises det på denne måten:

For nedtrekkslister der du kan velge å vise flere resultater samtidig (som for eksempel sparekontoer eller aksjefond).

I motsetning til reglene for SearchableDropdown og vanlig Dropdown er denne funksjonaliteten brukbar med så lite som to alternativer å velge mellom/kombinere.

Dropdown multiselect skal kun brukes i situasjoner det gir mening å gi brukeren mulighet til å markere flere alternativer for sammenligning eller oppsamling.