Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Dropdown
Dropdown lader brugeren vælge én blandt flere muligheder i en udfoldet liste.
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)
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)
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.
Varianter
Deaktiveret
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
- ISO 9241-143: Forms (2012)
- Luke Wroblewski: Dropdowns Should be the UI of Last Resort (2015)
Installation
HTML Struktur
<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
<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>Om custom elements
HTML-muligheder
Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.
Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-select> med <div class="fds-select">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.
Eksempler
<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>Varianter
Fejl
<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.
<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>Attributter til <fds-error-message>
| Attribut | Beskrivelse |
|---|---|
| id | Hvis ikke angivet, genereres der automatisk et id. |
| icon-text | Sæt en anden tekst på fejlikonet. |
| hidden | Styrer synligheden af fejlmeddelelsen. |
Events fra <fds-error-message>
| Event | Beskrivelse |
|---|---|
| error-message-visibility-changed | Afsender en hændelse til forælderkomponenter, når synligheden ændres. |
| error-message-callback | Afsender en hændelse til opdatering af forælderkomponenten. |
Hjælpetekst
<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.
<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>Attributter til <fds-help-text>
| Attribut | Beskrivelse |
|---|---|
| id | Hvis ikke angivet, genereres der automatisk et id. |
| hidden | Styrer synligheden af hjælpeteksten. |
Events fra <fds-help-text>
| Event | Beskrivelse |
|---|---|
| help-text-callback | Afsender en hændelse til opdatering af forælderkomponenten. |
Obligatoriske og frivillige dropdown
<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
<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
Attributter
| Attribut | Beskrivelse |
|---|---|
| show-required-status | Viser om inputfeltet er obligatorisk eller frivilligt. Indsæt en tekst i attributten for at overskrive default-teksten. |