Gå til sidens indhold
Det Fælles DesignsystemDevelop

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.

Åbn dette eksempel i et nyt vindue: checkbox-large
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.

Åbn dette eksempel i et nyt vindue: error-message-checkbox
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

Åbn dette eksempel i et nyt vindue: checkbox-group-helptext
Eksempel på tjekboksgruppe med hjælpetekst
Tjekbokse Dette er en hjælpetekst
Gå til eksemplets kode: checkbox-group-helptext

Hjælpetekst til enkelte tjekbokse

Åbn dette eksempel i et nyt vindue: checkbox-helptext
Eksempel på tjekbokse med hjælpetekst
Tjekbokse
Dette er en hjælpetekst
Dette er en hjælpetekst
Gå til eksemplets kode: checkbox-helptext

Skjult indhold (Collapse)

Åbn dette eksempel i et nyt vindue: checkbox-collapse
Eksempel på tjekboks med skjult indhold
Gå til eksemplets kode: checkbox-collapse

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

Vis dette eksempel i et nyt vindue: checkbox-group-helptext
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>
Gå til eksemplets retningslinjer

Hjælpetekst til enkelte tjekbokse

Vis dette eksempel i et nyt vindue: checkbox-helptext
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>
Gå til eksemplets retningslinjer

Skjult indhold (collapse)

Vis dette eksempel i et nyt vindue: checkbox-collapse
Kodeeksempel
<div class="form-group">

    <div class="hidden-content-wrapper">
        <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>

</div>
Gå til eksemplets 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"

Om custom elements

Tjekbokse har to custom elementer tilknyttet: <fds-checkbox> og <fds-checkbox-group>.

Begge komponenter forventer, at de nødvendige HTML-elementer er til stede. Den enkelte checkbox kræver et input- og et label-element. Checkbox-gruppen kræver et fieldset, der omslutter gruppens legend og de enkelte checkboxes. Ved initialisering tilføjer custom elementet de nødvendige klasser, attributter og event listeners.

Hvis den forventede HTML mangler, forsøger komponenten at initialisere det, der er muligt, uden at flytte rundt på eksisterende elementer.

HTML-muligheder

Som udgangspunkt bør man anvende custom element-koden, da denne kommer med JavaScript, der genererer både den nødvendige HTML og funktionalitet.

Hvis man ikke ønsker at benytte custom elements, kan man tage den genererede HTML i stedet. Erstat evt. <fds-checkbox> med <div class="fds-checkbox">. Bemærk, at man i så fald selv er ansvarlig for HTML og funktionalitet.

Eksempler

Tjekbox med label lavet med custom element

Åbn i et nyt vindue 
<fds-checkbox>
    <input type="checkbox" name="checkbox-example" id="custom-element-checkbox-example">
    <label>Tjekbox med label</label>
</fds-checkbox>

Både ID og klasser kan undlades, hvormed elementet selv indsætter disse. Elementet kan derfor simplificeres til:

<fds-checkbox>
    <input type="checkbox" name="checkbox-example" id="checkbox-input-id">
    <label>Tjekbox med label</label>
</fds-checkbox>

Varianter

Fejl

<fds-error-message> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button-group>, <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>. Dette custom-element tilføjer automatisk et fejlikon og strukturerer indholdet, inkluderer korrekte ARIA-attributter og skjulte tilstande samt underretter forælderkomponenten om ændringer i synlighed.

Åbn i et nyt vindue
Fejl text 
<fds-checkbox-group group-label="Group label">
    <fds-checkbox>
        <input type="checkbox" name="checkbox1-example" value="v1" id="chk95b7e42c">
        <label>Første tjekboks</label>
    </fds-checkbox>
    <fds-checkbox>
        <input type="checkbox" name="checkbox2-example" value="v2" id="chkac82adda">
        <label>Anden tjekboks</label>
    </fds-checkbox>
    <fds-error-message id="error9c8e8ffc">Fejl text</fds-error-message>
</fds-checkbox-group>

Attributter til <fds-error-message>

Attribut Beskrivelse
id Hvis ikke angivet, genereres der automatisk et id.
icon-text Sæt en anden tekst på fejlikonet.
hidden Styrer synligheden af fejlmeddelelsen.

Events fra <fds-error-message>

Event Beskrivelse
error-message-visibility-changed Afsender en hændelse til forælderkomponenter, når synligheden ændres.
error-message-callback Afsender en hændelse til opdatering af forælderkomponenten.

Hjælpetekst

<fds-help-text> er et selvstændigt custom element, som kan anvendes sammen med <fds-input>, <fds-checkbox>, <fds-checkbox-group>, <fds-radio-button>, <fds-radio-button-group> <fds-date-input>, <fds-upload-file>, <fds-date-picker> og <fds-textarea>.

Hjælpetekst til enkelte tjekbokse

Åbn i et nyt vindue
Hjælpetekst 
<fds-checkbox>
    <input type="checkbox" name="checkbox1-example" value="v1" id="chk27ec55bc">
    <label>Tjekboks label</label>
    <fds-help-text id="help39fe3d34">Hjælpetekst</fds-help-text>
</fds-checkbox>

Tjekboksgruppe med hjælpetekst

Åbn i et nyt vindue
Tjekboks gruppe med hjælptekst Dette er en hjælpetekst 
<fds-checkbox-group group-label="Group label">
    <fieldset>
        <legend>Tjekboks gruppe med hjælptekst</legend>
        <fds-help-text id="helpf6a3703d">Dette er en hjælpetekst</fds-help-text>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example" value="v1" id="chkfdefc029">
            <label>Første tjekboks</label>
        </fds-checkbox>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example2" value="v2" id="chkddba828e">
            <label>Anden tjekboks</label>
        </fds-checkbox>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example3" value="v3" id="chkd4bab6c">
            <label>Tredje tjekboks</label>
        </fds-checkbox>
    </fieldset>
</fds-checkbox-group>

Attributter til <fds-help-text>

Attribut Beskrivelse
id Hvis ikke angivet, genereres der automatisk et id.
hidden Styrer synligheden af hjælpeteksten.

Events fra <fds-help-text>

Event Beskrivelse
help-text-callback Afsender en hændelse til opdatering af forælderkomponenten.

Obligatoriske og frivillige tjekbokse

Åbn i et nyt vindue 
<fds-checkbox show-required-status>
    <input type="checkbox" name="checkbox-required-example1" id="custom-element-checkbox-required" required>
    <label>Tjekbox label</label>
</fds-checkbox>

<fds-checkbox show-required-status>
    <input type="checkbox" name="checkbox-required-example1" id="custom-element-checkbox-optional">
    <label>Tjekbox label</label>
</fds-checkbox>

<fds-checkbox show-required-status="Custom required label">
    <input type="checkbox" name="checkbox-required-example1" id="custom-element-checkbox-required1" required>
    <label>Tjekbox label</label>
</fds-checkbox>

<fds-checkbox show-required-status="Custom frivilligt label">
    <input type="checkbox" name="checkbox-required-example1" id="custom-element-checkbox-optional1">
    <label>Tjekbox label</label>
</fds-checkbox>

Skjult indhold (Collapse)

Åbn i et nyt vindue 
<fds-checkbox>
    <input type="checkbox" id="chk22373264">
    <label>Vis inputfelt</label>
    <div class="checkbox-content" id="exp74ba52c3">
        <fds-input>
            <label class="form-label">Inputfelt label</label>
            <input type="text" name="input-wrapper-help-text" class="form-input" id="inpa866ac0">
        </fds-input>
    </div>
</fds-checkbox>

Deaktiveret

Deaktiveret enkelte tjekbokse

Åbn i et nyt vindue 
<fds-checkbox>
    <input type="checkbox" name="group-disabled" id="custom-element-checkbox-disabled" disabled>
    <label>Deaktiveret tjekboks</label>
</fds-checkbox>

Deaktiveret tjekboksgruppe

Åbn i et nyt vindue
Deaktiveret tjekboks gruppe 
<fds-checkbox-group>
    <fieldset disabled>
        <legend>Deaktiveret tjekboks gruppe</legend>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example" value="v1" id="chk68398f14">
            <label>Første tjekboks</label>
        </fds-checkbox>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example2" value="v2" id="chkdd8a37d7">
            <label>Anden tjekboks</label>
        </fds-checkbox>
        <fds-checkbox>
            <input type="checkbox" name="checkbox-example3" value="v3" id="chk9d53e73a">
            <label>Tredje tjekboks</label>
        </fds-checkbox>
    </fieldset>
</fds-checkbox-group>

Konfiguration

fds-checkbox

Attributter

Attribut Beskrivelse
show-required-status Viser om tjekboksen er obligatorisk eller frivillig. Indsæt en tekst i attributten for at overskrive default-teksten.
ready Kan bruges til at udskyde automatisk initialisering. Sæt ready=”false” for at forhindre initialisering ved tilføjelse til DOM’en, og fjern attributten eller sæt ready=”true” for at initialisere komponenten.

Funktioner

Funktion Beskrivelse
init() Initialiserer komponenten manuelt, fx hvis komponenten har ready=”false”, eller hvis indholdet indsættes senere. Metoden kan kaldes flere gange uden at komponenten bør fejle.

fds-checkbox-group

Funktioner

Funktion Beskrivelse
init() Initialiserer komponenten manuelt, fx hvis indholdet indsættes senere. Metoden kan kaldes flere gange uden at komponenten bør fejle.

Vi indsamler statistik ved hjælp af tredjepartscookies til at forbedre brugeroplevelsen.

Alle indsamlede data anonymiseres.

Læs mere om vores brug af cookies