Tjekboks (Checkbox)

• Lille tjekboks
• Skjult indhold (Collapse)

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<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

Varianter

Lille tjekboks

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

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