Gå til sidens indhold

Vælg et tema

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Komponenter

Tjekboks (Checkbox)

Tjekbokse lader brugeren vælge en eller flere muligheder.

Eksempel på tjekbokse
Tjekbokse

Sådan bruges komponenten

Anvendes til

Tjekbokse giver brugeren mulighed for at vælge en eller flere værdier ud fra en synlig liste.

Når brugeren skal have overblik over sine mulige valg.

Når brugeren skal be- eller afkræfte et valg, fx ”Ja/Nej” (i det tilfælde en enkelt tjekboks), eller slå noget til eller fra (toggle).

Når listen over mulige valg kan være på en mobilvisning.

Anvendes ikke til

Når der er for mange valg til at give mening på en mobilvisning.

Når brugeren kun kan vælge én værdi. Her skal du i stedet anvende radioknapper.

Vejledning

Brugeren skal kunne tappe eller klikke på tjekboksen eller dens label for at vælge eller fravælge dens værdi.

Du bør opstille lister med tjekbokse i lodret linje af hensyn til brugerens læseretning.

Anvend et positivt sprog til værdierne. I stedet for fx ”Jeg vil ikke modtage bekræftelse på email” bør du skrive ”Jeg vil gerne modtage bekræftelse på email”.

Sørg for at der er tilstrækkelig luft omkring den enkelte tjekboks, så den er brugbar på touchskærme.

Hvis du giver brugeren en liste med tjekbokse, så gør det tydeligt gennem enten label eller hjælpetekst, hvor mange tjekbokse det forventes, at de vælger.

Sådan (do)

Eksempel på, hvordan en tjekboks kan se ud

Sådan: Brug tjekbokse, når der kan vælges flere svar i samme liste (ISO, 2012, afsnit 8.11).

Ikke sådan (don't)

Eksempel på, hvordan en tjekboks ikke bør se ud

Ikke sådan: Brug ikke tjekbokse, når der kun kan vælges 1 svar blandt gensidigt udelukkende svarmuligheder. Undgå at bryde konventioner og visuelle standardvisninger (Nielsen, 2004).

Fejlmeddelelse

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

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

Eksempel på tjekbokse med fejlmeddelelse
Hvad er din nationalitet? Fejl: Angiv om du er dansk, svensk eller anden nationalitet

Varianter

Hjælpetekst

Tjekboksgruppe med hjælpetekst

Eksempel på tjekboksgruppe med hjælpetekst
Tjekbokse Dette er en hjælpetekst

Hjælpetekst til enkelte tjekbokse

Eksempel på tjekbokse med hjælpetekst
Tjekbokse
Dette er en hjælpetekst
Dette er en hjælpetekst

Skjult indhold (Collapse)

Eksempel på tjekboks med skjult indhold

Anvendes til

Anvendes til at vise et ekstra felt, der er relevant afhængigt af den valgte tjekboks. Fx kan du vise et e-mailfelt, når brugeren vælger at ville kontaktes pr. e-mail.

Anvendes ikke til

Anvendes ikke til at vise ekstra beskrivende/oplysende tekst eller billeder.

Vejledning

Hold det enkelt. Hvis du har behov for at eksponere større mængder af ekstra funktionalitet, bør du overveje at fordele det ud over flere sider i stedet.

Sådan (do)
Eksempel på, hvordan en skjul og vis kan se ud

Sådan: Brug skjul og vis-funktionen i tilfælde, hvor brugerne skal vælge mellem at udfylde alternative felter, fx forskellige slags kontaktoplysninger.

Ikke sådan (don't)
Eksempel på, hvordan en skjul og vis ikke bør se ud

Ikke sådan: Brug ikke skjul og vis-funktionen til andet end inputelementer såsom tekst. Hvis der er behov for uddybende tekst til tjekboksen, så indsæt i stedet en hjælpetekst.

Brug heller ikke skjul og vis-funktionen, når det er obligatorisk at udfylde flere felter i gruppen. Det giver brugerne en ekstra interaktionsomkostning (Budiu, 2013) at skulle åbne de forskellige felter.

Se komponenten i eksempelløsninger

Referencer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <fieldset>
        <legend class="form-label">
            Tjekbokse
        </legend>

        <div class="form-group-checkbox">
            <input type="checkbox" id="large-option1" name="checkbox-large[]"
                class="form-checkbox" value="1">
            <label class="form-label" for="large-option1">Tjekboks 1</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="large-option2" name="checkbox-large[]"
                class="form-checkbox" value="2">
            <label class="form-label" for="large-option2">Tjekboks 2</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="large-option3" name="checkbox-large[]"
                class="form-checkbox" value="3">
            <label class="form-label" for="large-option3">Tjekboks 3</label>

        </div>

    </fieldset>
</div>
  • Indsæt altid to eller flere tjekbokse i et fieldset inklusive legend. En enkelt tjekboks skal ikke sidde i et fieldset.
  • Giv hver tjekboks sit eget id og angiv samme værdi til det tilhørende label.
  • Tjekboksenes design er ændret ift. standardvisningen for at gøre dem tydeligere og øge deres visuelle respons til brugerens interaktion.
  • Tjekboksene er gjort tilgængelige for skærmlæsere på trods af deres visuelle design, ved at selve tagget for tjekboksen er placeret uden for det synlige skærmområde.

JavaScript

Tjekboks med skjult indhold kræver JavaScript for at fungere. Man kan enten gøre brug af DKFDS.init() eller initiere komponenten manuelt med nedenstående:

new DKFDS.CheckboxToggleContent(document.getElementById('CHECKBOX-INPUT-ID')).init();

Events

Event key Element Beskrivelse
fds.collapse.expanded input.js-checkbox-toggle-content Når en skjul/vis komponent bliver foldet ud, bliver eventet fds.collapse.open udløst på input elementet
fds.collapse.collapsed input.js-checkbox-toggle-content Når en skjul/vis komponent bliver foldet ind, bliver eventet fds.collapse.close udløst på input elementet

Hjælpetekst

Tjekboksgruppe med hjælpetekst

Kodeeksempel
<div class="form-group">
    <fieldset aria-describedby="group-helptext-hint ">
        <legend class="form-label">
            Tjekbokse
        </legend>
        <span class="form-hint" id="group-helptext-hint">Dette er en hjælpetekst</span>

        <div class="form-group-checkbox">
            <input type="checkbox" id="group-helptext-option1" name="checkbox-group-helptext"
                class="form-checkbox" value="1">
            <label class="form-label" for="group-helptext-option1">Første tjekboks</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="group-helptext-option2" name="checkbox-group-helptext"
                class="form-checkbox" value="2">
            <label class="form-label" for="group-helptext-option2">Anden tjekboks</label>

        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="group-helptext-option3" name="checkbox-group-helptext"
                class="form-checkbox" value="3">
            <label class="form-label" for="group-helptext-option3">Tredje tjekboks</label>

        </div>

    </fieldset>
</div>

Hjælpetekst til enkelte tjekbokse

Kodeeksempel
<div class="form-group">
    <fieldset>
        <legend class="form-label">
            Tjekbokse
        </legend>

        <div class="form-group-checkbox">
            <input type="checkbox" id="checkbox-helptext-option1" name="checkbox-helptext"
                class="form-checkbox" value="1"
                aria-describedby="checkbox-helptext-option1-hint">
            <label class="form-label" for="checkbox-helptext-option1">Første tjekboks</label>

            <span class="form-hint" id="checkbox-helptext-option1-hint">Dette er en
                hjælpetekst</span>
        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="checkbox-helptext-option2" name="checkbox-helptext"
                class="form-checkbox" value="2"
                aria-describedby="checkbox-helptext-option2-hint">
            <label class="form-label" for="checkbox-helptext-option2">Anden tjekboks</label>

            <span class="form-hint" id="checkbox-helptext-option2-hint">Dette er en
                hjælpetekst</span>
        </div>

        <div class="form-group-checkbox">
            <input type="checkbox" id="checkbox-helptext-option3" name="checkbox-helptext"
                class="form-checkbox" value="3">
            <label class="form-label" for="checkbox-helptext-option3">Tredje tjekboks</label>

        </div>

    </fieldset>
</div>

Skjult indhold (collapse)

Kodeeksempel
<div class="form-group">

    <div class="form-group-checkbox">
        <input type="checkbox" id="checkbox1" name="checkbox1"
            class="form-checkbox js-checkbox-toggle-content" value="1"
            data-aria-controls="checkbox1-collapse" data-aria-expanded="false">
        <label class="form-label" for="checkbox1">Tjekboks viser indhold<span class="sr-only">
                Udfyld informationer herunder</span></label>

    </div>
    <div id="checkbox1-collapse" aria-hidden="true" class="checkbox-content">

        <div class="form-group">
            <label class="form-label" for="textinput1">Inputfelt med label</label>

            <input type="text" id="textinput1" name="text1" class="form-input input-width-m"
                required>
        </div>

    </div>

</div>

For at initialisere collapse funktionaliteten på en checkbox skal input[type=checkbox] have følgende:

  • Klassen 'js-checkbox-toggle-content'. Denne klasse gør at funktionaliteten bliver initialiseret.
  • Attributten data-js-target="id-of-target-to-collapse": denne attribute skal have samme værdi som i id attributten på det element som skal vises på tjekboksen er aktiveret.
  • Hvis man ønsker at tjekboksen skal være valgt fra starten af, skal den have attributten 'checked'.
  • aria-controls="id-of-target-to-collapse"

Det element som skal collapses/expandes skal have følgende:

  • id="id-of-target-to-collapse"
  • aria-hidden="true/false"