Kode

Tjekboks

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<div class="form-group">
    <fieldset>
        <legend class="h5">Stor tjekboks (anbefalet)</legend>
        <ul class="nobullet-list">
            <li>
                <input id="large1" type="checkbox" name="checkbox-large[]"
                    value="1" class="form-checkbox  checkbox-large " />
                <label for="large1" class="">Tjekboks 1</label>
            </li>
            <li>
                <input id="large2" type="checkbox" name="checkbox-large[]"
                    value="2" class="form-checkbox  checkbox-large " />
                <label for="large2" class="">Tjekboks 2</label>
            </li>
            <li>
                <input id="large3" type="checkbox" name="checkbox-large[]"
                    value="3" class="form-checkbox  checkbox-large " />
                <label for="large3" class="">Tjekboks 3</label>
            </li>
            <li>
                <input id="large4" type="checkbox" name="checkbox-large[]"
                    value="4" class="form-checkbox  checkbox-large "
                    disabled />
                <label for="large4" class="">Tjekboks 4</label>
            </li>
        </ul>
    </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.

Varianter

Fejlmeddelelse

<div class="form-group form-error">
    <fieldset aria-describedby="example-checkbox-error">
        <legend class="h5">Tjekboks med fejl</legend>
        <span class="form-error-message" id="example-checkbox-error"><span
                class="sr-only">Fejl:</span> Hjælpsom fejlmeddelelse</span>
        <ul class="nobullet-list">
            <li>
                <input id="checkboxerror1" type="checkbox"
                    name="checkboxerror" value="1"
                    class="form-checkbox  checkbox-large " />
                <label for="checkboxerror1" class="">Tjekboks 1</label>
            </li>
            <li>
                <input id="checkboxerror2" type="checkbox"
                    name="checkboxerror[]" value="2"
                    class="form-checkbox  checkbox-large " />
                <label for="checkboxerror2" class="">Tjekboks 2</label>
            </li>
            <li>
                <input id="checkboxerror3" type="checkbox"
                    name="checkboxerror[]" value="3"
                    class="form-checkbox  checkbox-large " />
                <label for="checkboxerror3" class="">Tjekboks 3</label>
            </li>
        </ul>
    </fieldset>
</div>

Lille tjekboks

<div class="form-group">
    <fieldset>
        <legend class="h5">Lille tjekboks</legend>
        <ul class="nobullet-list">
            <li>
                <input id="small1" type="checkbox" name="checkbox-small[]"
                    value="1" class="form-checkbox   " />
                <label for="small1" class="">Tjekboks 1</label>
            </li>
            <li>
                <input id="small2" type="checkbox" name="checkbox-small[]"
                    value="2" class="form-checkbox   " />
                <label for="small2" class="">Tjekboks 2</label>
            </li>
            <li>
                <input id="small3" type="checkbox" name="checkbox-small[]"
                    value="3" class="form-checkbox   " />
                <label for="small3" class="">Tjekboks 3</label>
            </li>
            <li>
                <input id="small4" type="checkbox" name="checkbox-small[]"
                    value="4" class="form-checkbox   " disabled />
                <label for="small4" class="">Tjekboks 4</label>
            </li>
        </ul>
    </fieldset>
</div>

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

Skjult indhold (Collapse)

<div class="form-group">

    <input id="id-checkbox1" type="checkbox" name="checkbox1" value="1"
        class="form-checkbox  checkbox-large js-checkbox-toggle-content"
        data-aria-controls='collapse-check1' data-aria-expanded='false' />
    <label for="id-checkbox1" class="">Tjekboks viser indhold</label>

    <div id="collapse-check1" aria-hidden="true"
        class="box-border-l collapsed">
        <div class="py-4">
            <p>Dette indhold bliver vist når tjekboksen er valgt.</p>
        </div>
    </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 id’et 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"

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

Events