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.


Kode

Tjekboks (Checkbox)

Eksempel på tjekboks
Stor tjekboks (anbefalet)

Eksempler og retningslinjer

Installation

HTML Struktur

Kodeeksempel
<div class="form-group">
    <fieldset>
        <legend class="form-label">
            Stor tjekboks (anbefalet)
        </legend>

        <div class="form-group-checkbox">
            <input type="checkbox" id="large-option1" name="checkbox-large[]"
                class="form-checkbox checkbox-large" 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 checkbox-large" 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 checkbox-large" 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

Varianter

Lille tjekboks

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

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

        </div>

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

        </div>

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

        </div>

    </fieldset>
</div>

Vær opmærksom på, at vi anbefaler, at man bruger den store tjekboks.

Skjult indhold (Collapse)

Kodeeksempel
<div class="form-group">
    <input type="checkbox" id="checkbox1" name="checkbox1"
        class="form-checkbox checkbox-large 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 checkbox-content-large">

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

Retningslinjer

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"