Gå til sidens indhold
Det Fælles DesignsystemDevelop
Komponenter

Dropdown

Dropdown lader brugeren vælge én blandt flere muligheder i en udfoldet liste.

Åbn dette eksempel i et nyt vindue: select
Eksempel på dropdown

Sådan bruges komponenten

Anvendes til

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

Anvendes ikke til

Lister med færre værdier end 5.

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, hvis brugeren skal vælge mere end 1 værdi.

Brug ikke dropdown til navigering mellem sider, som den ikke er velegnet til.

Vejledning

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

Undgå at lade brugerens valg i én dropdown 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, så marker den med <option selected="selected">Default</option>. Dermed slipper brugerne for at bruge tid på at gennemsøge listen.

Undlad at løsningen reagerer på brugerens direkte valg i dropdownen, så brugeren altid let kan vælge en anden mulighed. Tilføj i stedet en knap, så løsningen først anvender brugerens valg ved klik på knappen.

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.

Fejlmeddelelse

Læs mere om korrekt brug af fejlmeddelelser og deres formuleringer.

Når der vises en fejlmeddelelse, vis da også fejlopsummering.

Åbn dette eksempel i et nyt vindue: select-error
Eksempel på dropdown med fejlmeddelelse
Fejl: Vælg region

Varianter

Deaktiveret

Åbn dette eksempel i et nyt vindue: select-disabled
Eksempel på deaktiveret dropdown
Gå til eksemplets kode: select-disabled

Bemærk, at deaktiverede dropdowns hverken har kontrastkrav eller kan få fokus og dermed kan være svære at opdage, fx når man anvender en skærmlæser. Det anbefales derfor, at man helt undlader dropdownen i stedet for at deaktivere den.

Se komponenten i eksempelløsninger

Trinformular til ansøgning: Tilføj dokumentation

Referencer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <label class="form-label" for="options">Region</label>

    <select class="form-select" name="options" id="options" required>
        <option value="">Vælg region</option>
        <option value="option1">Hovedstaden</option>
        <option value="option2">Midtjylland</option>
        <option value="option3">Nordjylland</option>
        <option value="option4">Sjælland</option>
        <option value="option5">Syddanmark</option>
    </select>
</div>

Dropdown skal have et label tilknyttet.

Anvend ikke JavaScript til automatisk at udføre en handling, når brugeren vælger en værdi i dropdownen. Tilføj i stedet en knap ved dropdownen.

Brug dropdown i begrænset omfang. Værdierne i en dropdown er ikke umiddelbart synlige for brugerne, og det øger sidens kompleksitet for dem.

Deaktiveret

Vis dette eksempel i et nyt vindue: select-disabled
Kodeeksempel
<div class="form-group">
    <label class="form-label  disabled" for="options-disabled">Region</label>

    <select class="form-select" name="options-disabled" id="options-disabled"
        disabled="disabled">
        <option value="">Vælg region</option>
        <option value="option1">Hovedstaden</option>
        <option value="option2">Midtjylland</option>
        <option value="option3">Nordjylland</option>
        <option value="option4">Sjælland</option>
        <option value="option5">Syddanmark</option>
    </select>
</div>
Gå til eksemplets retningslinjer

Web Component-koden er i beta

Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<fds-select>
    <label>Label</label>
    <select name="select1" id="sele31c399b">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
 
<fds-select>
    <label for="sele31c399b">Label</label>
    <select name="select1" id="sele31c399b">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

Om denne komponent

Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.

Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.

Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.

Varianter

Fejl

Åbn eksempel i nyt vindue
Dette er en fejl
Web Component Genereret HTML 
<fds-select>
    <label>Label</label>
    <select name="select2" id="sel7fb9c025">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
    <fds-error-message id="error13365e97">Dette er en fejl</fds-error-message>
</fds-select>
 
<fds-select>
    <label for="sel7fb9c025">Label</label>
    <select name="select2" id="sel7fb9c025" aria-describedby="error13365e97" aria-invalid="true">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
    <fds-error-message id="error13365e97">
        <svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
        <span class="visible-message">Dette er en fejl</span>
    </fds-error-message>
</fds-select>

Hjælpetekst

Åbn eksempel i nyt vindue
Dette er en hjælpetekst
Web Component Genereret HTML 
<fds-select>
    <label>Label</label>
    <fds-help-text id="help1ea9a742">Dette er en hjælpetekst</fds-help-text>
    <select name="select4" id="sel3da45ef3">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
 
<fds-select>
    <label for="sel3da45ef3">Label</label>
    <fds-help-text id="help1ea9a742" class="help-text">Dette er en hjælpetekst</fds-help-text>
    <select name="select4" id="sel3da45ef3" aria-describedby="help1ea9a742">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

Obligatoriske og frivillige dropdown

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<fds-select show-required-status>
    <label>Label</label>
    <select name="select6" id="sela8544d97">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

<fds-select show-required-status>
    <label>Label</label>
    <select name="select7" required id="sel576ca9da">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

<fds-select show-required-status="optional">
    <label>Label</label>
    <select name="select8" id="selc93068ff">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

<fds-select show-required-status="required">
    <label>Label</label>
    <select name="select9" required id="seld09c2f5b">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
 
<fds-select show-required-status="">
    <label for="sela8544d97">Label<span class="weight-normal"> (frivilligt)</span>
    </label>
    <select name="select6" id="sela8544d97">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
<fds-select show-required-status="">
    <label for="sel576ca9da">Label<span class="weight-normal"> (*skal udfyldes)</span>
    </label>
    <select name="select7" required="" id="sel576ca9da">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
<fds-select show-required-status="optional">
    <label for="selc93068ff">Label<span class="weight-normal"> (optional)</span>
    </label>
    <select name="select8" id="selc93068ff">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
<fds-select show-required-status="required">
    <label for="seld09c2f5b">Label<span class="weight-normal"> (*required)</span>
    </label>
    <select name="select9" required="" id="seld09c2f5b">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

Deaktiveret

Åbn eksempel i nyt vindue
Web Component Genereret HTML 
<fds-select>
    <label>Label</label>
    <select name="select5" disabled id="sel21e0fe2a">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>
 
<fds-select>
    <label for="sel21e0fe2a">Label</label>
    <select name="select5" disabled="" id="sel21e0fe2a">
        <option value="">Vælg region</option>
        <option value="option1">Mulighed 1</option>
        <option value="option2">Mulighed 2</option>
        <option value="option3">Mulighed 3</option>
    </select>
</fds-select>

Konfiguration

fds-select

Attributter

Attribut Beskrivelse
show-required-status Viser om dropdown er obligatorisk eller frivillig baseret på required-attributten. Indsæt en tekst i attributten for at overskrive default-teksten.

fds-help-text

Attributter

Attribut Beskrivelse
id ID for hjælpeteksten. Hvis denne er udeladt, genereres et tilfældigt ID.
hidden Skjuler hjælpeteksten. Skal sættes til true eller være tom for at tage effekt.

Events

Event Beskrivelse
help-text-callback Udløses på det omsluttende element, når hjælpeteksten tilføjes, fjernes, eller dens hidden-attribut ændres.
help-text-visibility-changed Udløses på det omsluttende element, når hidden-attributten ændres. event.detail.helptextId indeholder hjælpetekstens ID, og event.detail.isHidden angiver, om den er skjult.

fds-error-message

Attributter

Attribut Beskrivelse
id ID for fejlbeskeden. Hvis denne er udeladt, genereres et tilfældigt ID.
icon-text Skærmlæsertekst for ikonet. Default er Fejl.
hidden Skjuler fejlbeskeden. Skal sættes til true eller være tom for at tage effekt.
targets Bruges kun af fds-date-input. Angiv ID'er eller navne på de inputfelter, fejlbeskeden er relateret til, separeret med komma.
message Teksten der skal vises i fejlbeskeden. Kan også angives som indhold i elementet.

Events

Event Beskrivelse
error-message-callback Udløses på det omsluttende element, når fejlbeskeden tilføjes, fjernes, eller en af dens attributter ændres.
error-message-visibility-changed Udløses på det omsluttende element, når hidden-attributten ændres. event.detail.errorId indeholder fejlbeskedens ID, og event.detail.isHidden angiver, om den er skjult.

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies