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