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
- 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:
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
Vær opmærksom på, at vi anbefaler, at man bruger den store tjekboks.
Skjult indhold (Collapse)
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"