Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Tjekboks (Checkbox)
Tjekbokse lader brugeren vælge en eller flere muligheder.
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)
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)
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.
Varianter
Hjælpetekst
Tjekboksgruppe med hjælpetekst
Hjælpetekst til enkelte tjekbokse
Skjult indhold (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)
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)
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
- ISO 9241-143: Forms (2012)
- Jakob Nielsen: Checkboxes vs. Radio Buttons (2004)
Installation
HTML Struktur
- 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 |
Hjælpetekst
Tjekboksgruppe med hjælpetekst
Hjælpetekst til enkelte tjekbokse
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"