Gå til sidens indhold

Udvidelser

Multiselect dropdown

Gør det muligt for brugeren at vælge flere elementer fra en liste.

Tilgængelighed

  • Bemærk: Multiselect dropdown-funktionen (SelectWoo) er gennemtestet af Det Fælles Designsystem og opfylder ikke alle krav til en anbefalet udvidelse. Det er dog den bedste, vi har kunnet finde indtil videre. Du skal bruger- og performanceteste prototyper med SelectWoo med entydigt positive resultat i forhold til din målgruppe, hvis du ønsker at anvende den. Det anbefales generelt, at du overvejer en anden løsning end en multiselect i din løsning.
  • Multiselect dropdown anvender bl.a. ARIA til at øge den umiddelbare tilgængelighed. Du skal imidlertid være opmærksom på, at en lang valgliste øger den kognitive belastning og dermed sænker den reelle tilgængelighed.

Brugervenlighed

Anvendes til

Multiselect dropdown anvendes til at give brugeren mulighed for at fortage mere end ét valg fra en prædefineret liste.

Anvendes ikke til

  • Multiselect dropdown egner sig ikke til valg i lister med længere værdier.
  • Multiselect dropdown egner sig ikke til mobile løsninger.

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 fx tjekbokse.
  • På trods af de udvidede muligheder i Select2-udvidelsen bør implementationen holdes så enkel som muligt.
  • Var varsom med at ændre indholdet af næste multiselect i forhold til det forrige valg.
  • Begræns antallet af valgmuligheder i listen, så brugeren ikke mister overblik over sit valg.
  • SelectWoo er afhængig af jQuery og dermed kræver den et ekstra request og ekstra kode i indlæsningen – dette kan nedsætte funktionens performance.
  • Du kan læse mere om alternativer til multiselects her

Multiselect funktionaliteten bygger på biblioteket SelectWoo, som er en tilgængelig implementering af det populære bibliotek Select2.

Det må antages at det er et begrænset antal selvbetjeningsløsninger som har brug for denne funktionalitet, derfor er dette bibliotek ikke inkluderet i standard javascript filen dkfds.js. En udvikler skal derfor selv inkludere de nødvendige filer for at få SelectWoo til at virke. Select2's guide kan bruges til opsætningen, dog skal SelectWoo's javascript filer bruges i steden for. Det er vigtigt at både javascript filer, og styling filer bliver inkluderet.

På dette dokumentationssite er multiselect funktionaliteten en del af javascript filen selectwoo-examples.js, denne fil har kun til formål at vise funktionaliteten på dette dokumentationsite, og skal ikke inkluderes i selve selvbetjeningsløsningen.

Eksemplet på denne side er implementeret her: https://github.com/detfaellesdesignsystem/dkfds-plugins/tree/master/src/components/selectwoo/example/js/dkfds-selectwoo-example.js

Standard

<div class="container">
    <form class="form mb-6">

        <div class="form-group">
            <label class="form-label" for="js-selectwoo-example1">Vælg
                flere muligheder</label>
            <select name="SelectWooExample" id="js-selectwoo-example1"
                class="d-none" multiple>

            </select>
        </div>

    </form>
</div>

Ajax data

<div class="container">
    <form class="form mb-6">
        <div class="form-group">
            <label class="form-label" for="js-selectwoo-example2">Vælg
                flere muligheder</label>
            <select name="SelectWooExample2" id="js-selectwoo-example2"
                class="d-none" multiple>
            </select>
        </div>
    </form>
</div>

Gruppering

Gruppering af valgmuligheder med optgroup

<div class="container">
    <form class="form mb-6">
        <div class="form-group">
            <label class="form-label" for="js-selectwoo-example3">Vælg
                flere muligheder</label>
            <select name="SelectWooExample3" id="js-selectwoo-example3"
                class="d-none" multiple>
                <optgroup label="Swedish Cars">
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                </optgroup>
                <optgroup label="German Cars">
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </optgroup>
            </select>
        </div>
    </form>
</div>