Komponenter

Multiselect

Multiselect gør det muligt for brugeren at vælge flere elementer i samme dropdown.

Denne komponent findes udelukkende som Web Component

Læs om baggrunden for komponenten i beslutningslog for version 12.0.0.

Åbn dette eksempel i et nyt vindue

Frugter

Æble

Pære

Banan

Mango

Appelsin

Vandmelon

Blåbær

Jordbær

Kirsebær

Sådan bruges komponenten

Anvendes til

Multiselect anvendes til løsninger, hvor brugeren kan vælge mere end én mulighed blandt syv eller flere muligheder.

Anvendes ikke til

Anvend ikke multiselect til løsninger, hvis brugeren har under syv muligheder at vælge imellem. Anvend da i stedet tjekbokse.

Anvend ikke multiselect, hvis brugeren kun kan vælge én mulighed. Anvend da i stedet dropdown eller radioknapper.

Vejledning

En multiselect dropdown er en avanceret funktion, der bør anvendes i meget begrænset omfang. Overvej om du kan tilbyde en bedre og mere overskuelig løsning såsom tjekbokse.

Formulér valgmulighederne så kort og præcist som muligt. Lange valgmuligheder vil gå i flere linjer, hvilket er mindre overskueligt for brugerne.

Sortér valgmulighederne på en måde, der giver mening for brugerne for netop den type data. Hvis brugerne leder efter en bestemt mulighed, de kender på forhånd i en lang liste, vil alfabetisk sortering som regel være den bedste løsning. I andre tilfælde og i kortere lister kan det være bedre at sortere efter andre parametre såsom indholdmæssige grupperinger, hyppighed eller størrelse. En brugertest vil afgøre, om den valgte sortering understøtter brugeroplevelsen.

Sæt teksten “Vælg en eller flere” i feltet, når der ikke er foretaget et valg. Hvis der er krav om at vælge mere end én, skriv da “Vælg flere” og supplér feltet med en hjælpetekst, der angiver, hvor mange valg brugeren skal træffe.

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

Frugter

Æble

Pære

Banan

Mango

Appelsin

Vandmelon

Blåbær

Jordbær

Kirsebær

Dette er en fejl

Varianter

Multiselect med “vælg alle”

Tilbyd funktionen “vælg alle”, når det er sandsynligt, at mange brugere vil vælge alle eller størstedelen af mulighederne i listen. De fleste multiselect vil ikke behøve denne funktion.

Åbn dette eksempel i et nyt vindue

Farver

Blå

Brun

Grøn

Grå

Gul

Hvid

Lilla

Orange

Rød

Turkis

Sort

Referencer

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

Frugter

Æble

Pære

Banan

Mango

Appelsin

Vandmelon

Blåbær

Jordbær

Kirsebær

Web Component
                        
                            <fds-multiselect>
    <span slot="label">Frugter</span>
    <fds-multiselect-opener></fds-multiselect-opener>

    <fds-multiselect-dialog>
        <fds-multiselect-options>
            <fds-multiselect-option>Æble</fds-multiselect-option>
            <fds-multiselect-option>Pære</fds-multiselect-option>
            <fds-multiselect-option>Banan</fds-multiselect-option>
            <fds-multiselect-option>Mango</fds-multiselect-option>
            <fds-multiselect-option>Appelsin</fds-multiselect-option>
            <fds-multiselect-option>Vandmelon</fds-multiselect-option>
            <fds-multiselect-option>Blåbær</fds-multiselect-option>
            <fds-multiselect-option>Jordbær</fds-multiselect-option>
            <fds-multiselect-option>Kirsebær</fds-multiselect-option>
        </fds-multiselect-options>
    </fds-multiselect-dialog>
</fds-multiselect>
                        
                    

                    
                

Om denne komponent

Denne komponent anvender shadow DOM. Det betyder, at komponenten genererer indkapslet HTML og styling, som ikke bør tilgås. Web Components med shadow DOM konfigureres gennem attributter og slots, når komponenten tillader indhold. Slots kan enten være navngivne, dvs. hvor attributten slot="navn" skal anvendes på det indhold, der tilføjes til webkomponenten, eller unavngivne.

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

Varianter

Multiselect med “vælg alle”

Åbn eksempel i nyt vindue

Farver

Blå

Brun

Grøn

Grå

Gul

Hvid

Lilla

Orange

Rød

Turkis

Sort

Web Component
                        
                            <fds-multiselect>
    <span slot="label">Farver</span>
    <fds-multiselect-opener></fds-multiselect-opener>

    <fds-multiselect-dialog>
        <fds-multiselect-options>
            <fds-multiselect-select-all></fds-multiselect-select-all>

            <fds-multiselect-option>Blå</fds-multiselect-option>
            <fds-multiselect-option>Brun</fds-multiselect-option>
            <fds-multiselect-option>Grøn</fds-multiselect-option>
            <fds-multiselect-option>Grå</fds-multiselect-option>
            <fds-multiselect-option>Gul</fds-multiselect-option>
            <fds-multiselect-option>Hvid</fds-multiselect-option>
            <fds-multiselect-option>Lilla</fds-multiselect-option>
            <fds-multiselect-option>Orange</fds-multiselect-option>
            <fds-multiselect-option>Rød</fds-multiselect-option>
            <fds-multiselect-option>Turkis</fds-multiselect-option>
            <fds-multiselect-option>Sort</fds-multiselect-option>
        </fds-multiselect-options>
    </fds-multiselect-dialog>
</fds-multiselect>
                        
                    

                    
                

Fejlmeddelelse

Åbn eksempel i nyt vindue

Frugter

Æble

Pære

Banan

Mango

Appelsin

Vandmelon

Blåbær

Jordbær

Kirsebær

Dette er en fejl

Web Component
                        
                            <fds-multiselect>
    <span slot="label">Frugter</span>
    <fds-multiselect-opener></fds-multiselect-opener>

    <fds-multiselect-dialog>
        <fds-multiselect-options>
            <fds-multiselect-option>Æble</fds-multiselect-option>
            <fds-multiselect-option>Pære</fds-multiselect-option>
            <fds-multiselect-option>Banan</fds-multiselect-option>
            <fds-multiselect-option>Mango</fds-multiselect-option>
            <fds-multiselect-option>Appelsin</fds-multiselect-option>
            <fds-multiselect-option>Vandmelon</fds-multiselect-option>
            <fds-multiselect-option>Blåbær</fds-multiselect-option>
            <fds-multiselect-option>Jordbær</fds-multiselect-option>
            <fds-multiselect-option>Kirsebær</fds-multiselect-option>
        </fds-multiselect-options>
    </fds-multiselect-dialog>

    <fds-error-message id="error4b0a4ff3">Dette er en fejl</fds-error-message>
</fds-multiselect>
                        
                    

                    
                

Konfiguration

fds-multiselect

Attributter

Attribut	Beskrivelse
name	Navnet på feltet, som anvendes ved formularindsendelse.
sr-tags-label	Angiver en skærmlæser-specifik label for gruppen af valgte muligheder (tags). Hvis intet er angivet, bruges “Valgte muligheder for `label`”.
show-required-status	Viser om multiselect er obligatorisk eller frivillig baseret på `required`-attributten. Indsæt en tekst i attributten for at overskrive default-teksten.
required	Gør feltet obligatorisk ved formularindsendelse.
disabled	Deaktiverer multiselect-komponenten.

Slots

Slot	Beskrivelse
label	Brug et `span`-element med `slot="label"`, som indeholder multiselect-komponentens label. Elementet får et `id` hvis det ikke har et.
Unavngivet	`fds-multiselect-opener`-, `fds-multiselect-dialog`-, `fds-help-text`- og `fds-error-message`-elementer.

fds-multiselect-opener

Attributter

Attribut	Beskrivelse
placeholder	Angiver den tekst, der vises, når ingen muligheder er valgt. Default er “Vælg en eller flere”.

Funktioner

Funktion	Beskrivelse
open()	Åbner dialogen med valgmuligheder.
close()	Lukker dialogen med valgmuligheder.
toggle()	Skifter mellem åben og lukket tilstand.

Events

Event	Beskrivelse
fds-multiselect-opener-expanded	Udløses når dialogen åbnes.
fds-multiselect-opener-collapsed	Udløses når dialogen lukkes.

fds-multiselect-dialog

Attributter

Attribut	Beskrivelse
sr-heading	Angiver en skærmlæser-specifik overskrift for dialogen. Default er “Vælg en eller flere muligheder”.

Slots

Slot	Beskrivelse
Unavngivet	`fds-multiselect-options`-elementet.

fds-multiselect-options

Slots

Slot	Beskrivelse
Unavngivet	`fds-multiselect-select-all`- og `fds-multiselect-option`-elementer.

fds-multiselect-option

Attributter

Attribut	Beskrivelse
value	Angiver værdien for valgmuligheden. Hvis ikke angivet, bruges tekstindholdet som værdi.
default-selected	Markerer valgmuligheden som valgt, når komponenten initialiseres, og ved nulstilling af formularen.

Slots

Slot	Beskrivelse
Unavngivet	Tekst for valgmuligheden.

fds-multiselect-select-all

Slots

Slot	Beskrivelse
Unavngivet	Tekst for “vælg alle”-muligheden.

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.