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
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="form-group">
<fieldset>
<legend class="form-label">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="form-label">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="form-label">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>
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
Event key | Element | Beskrivelse |
---|---|---|
fds.collapse.open | 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.close | input.js-checkbox-toggle-content |
Når en skjul/vis komponent bliver foldet ind, bliver eventet fds.collapse.close udløst på input elementet |