Tjekboks (Checkbox)

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.

Tjekboks do's and don'ts

Sådan (do)

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)

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.

Varianter

Skjult indhold (Collapse)

Se komponenten i eksempelløsninger

• Trinformular til registrering: Vælg personer
• Trinformular til registrering: Vælg noget mere

Referencer

• ISO 9241-143: Forms (2012)
• Jakob Nielsen: Checkboxes vs. Radio Buttons (2004)

Installation

HTML Struktur

<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

Skjult indhold (collapse)

<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"