Komponenter
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
Eksempel på tjekboksgruppe med hjælpetekst
Hjælpetekst til enkelte tjekbokse
Eksempel på tjekbokse med hjælpetekst
Skjult indhold (Collapse)
Eksempel på tjekboks med skjult indhold
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
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
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>Hjælpetekst til enkelte tjekbokse
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>Skjult indhold (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>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"
Web Component-koden er i beta
Læs mere om Web Components i beta-version. Hvis du har forslag til forbedringer eller kommentarer, kan du oprette et issue på GitHub eller sende en e-mail til FDS-teamet.
<fds-checkbox>
<input type="checkbox" name="checkbox-example" id="checkbox-example-beb0c0ec">
<label>Tjekbox med label</label>
</fds-checkbox><fds-checkbox>
<input type="checkbox" name="checkbox-example" id="checkbox-example-beb0c0ec" class="form-checkbox">
<label class="form-label" for="checkbox-example-beb0c0ec">Tjekbox med label</label>
</fds-checkbox>Om denne komponent
Denne komponent anvender light DOM. Det betyder, at komponenten genererer HTML, der kan tilgås ligesom al anden HTML på siden. Du kan som udvikler vælge mellem at tage Web Component-koden, hvis du vil lade komponenten generere HTML’en, eller tage versionen med den genererede kode, hvis du har brug for at ændre i HTML’en først. Begge muligheder vises i fanebladene i komponentens eksempler.
Uanset hvilken kode du tager, vil komponenten stadig aktivere den nødvendige JavaScript. Bemærk, at udvalgte light DOM-komponenter har en ready-attribut, du som udvikler kan bruge, hvis du i dit framework har behov for at udskyde initialisering af komponenten.
Læs mere på Web Components i beta-version om komponenternes anvendelse af light DOM og shadow DOM samt vores ønsker til feedback.
Varianter
Fejl
<fds-checkbox-group>
<fieldset>
<legend class="form-label">Group label</legend>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-9144773b" value="v1" id="chk95b7e42c">
<label>Første tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-9144773b" value="v2" id="chkac82adda">
<label>Anden tjekboks</label>
</fds-checkbox>
<fds-error-message id="error9c8e8ffc">Vælg mindst én tjekboks</fds-error-message>
</fieldset>
</fds-checkbox-group>
<fds-checkbox-group>
<fieldset aria-describedby="error9c8e8ffc">
<legend class="form-label">Group label</legend>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-9144773b" value="v1" id="chk95b7e42c" class="form-checkbox">
<label class="form-label" for="chk95b7e42c">Første tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-9144773b" value="v2" id="chkac82adda" class="form-checkbox">
<label class="form-label" for="chkac82adda">Anden tjekboks</label>
</fds-checkbox>
<fds-error-message id="error9c8e8ffc">
<svg class="icon-svg alert-icon" aria-label="Fejl" focusable="false"><use href="#error"></use></svg>
<span class="visible-message">Vælg mindst én tjekboks</span>
</fds-error-message>
</fieldset>
</fds-checkbox-group>Hjælpetekst
Hjælpetekst til enkelte tjekbokse
<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><fds-checkbox>
<input type="checkbox" name="checkbox1-example" value="v1" id="chk27ec55bc" class="form-checkbox" aria-describedby="help39fe3d34">
<label class="form-label" for="chk27ec55bc">Tjekboks label</label>
<fds-help-text id="help39fe3d34" class="help-text">Hjælpetekst</fds-help-text>
</fds-checkbox>Tjekboksgruppe med hjælpetekst
<fds-checkbox-group>
<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-a9731433" value="v1" id="chkfdefc029">
<label>Første tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-a9731433" value="v2" id="chkddba828e">
<label>Anden tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-a9731433" value="v3" id="chkd4bab6c">
<label>Tredje tjekboks</label>
</fds-checkbox>
</fieldset>
</fds-checkbox-group>
<fds-checkbox-group>
<fieldset aria-describedby="helpf6a3703d">
<legend class="form-label">Tjekboks gruppe med hjælptekst</legend>
<fds-help-text id="helpf6a3703d" class="help-text">Dette er en hjælpetekst</fds-help-text>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-a9731433" value="v1" id="chkfdefc029" class="form-checkbox">
<label class="form-label" for="chkfdefc029">Første tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-a9731433" value="v2" id="chkddba828e" class="form-checkbox">
<label class="form-label" for="chkddba828e">Anden tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-a9731433" value="v3" id="chkd4bab6c" class="form-checkbox">
<label class="form-label" for="chkd4bab6c">Tredje tjekboks</label>
</fds-checkbox>
</fieldset>
</fds-checkbox-group>Obligatoriske og frivillige tjekbokse
<fds-checkbox show-required-status>
<input type="checkbox" name="checkbox-required-example1" id="checkbox-required-9557d0cd" required>
<label>Tjekbox label</label>
</fds-checkbox>
<fds-checkbox show-required-status>
<input type="checkbox" name="checkbox-required-example1" id="checkbox-optional-8fe8eb50">
<label>Tjekbox label</label>
</fds-checkbox>
<fds-checkbox show-required-status="required">
<input type="checkbox" name="checkbox-required-example1" id="checkbox-required-87a17dbe" required>
<label>Tjekbox label</label>
</fds-checkbox>
<fds-checkbox show-required-status="optional">
<input type="checkbox" name="checkbox-required-example1" id="checkbox-optional-f452f565">
<label>Tjekbox label</label>
</fds-checkbox><fds-checkbox show-required-status="">
<input type="checkbox" name="checkbox-required-example1" id="checkbox-required-9557d0cd" required="" class="form-checkbox">
<label class="form-label" for="checkbox-required-9557d0cd">Tjekbox label<span class="weight-normal"> (*skal udfyldes)</span>
</label>
</fds-checkbox>
<fds-checkbox show-required-status="">
<input type="checkbox" name="checkbox-required-example1" id="checkbox-optional-8fe8eb50" class="form-checkbox">
<label class="form-label" for="checkbox-optional-8fe8eb50">Tjekbox label<span class="weight-normal"> (frivilligt)</span>
</label>
</fds-checkbox>
<fds-checkbox show-required-status="required">
<input type="checkbox" name="checkbox-required-example1" id="checkbox-required-87a17dbe" required="" class="form-checkbox">
<label class="form-label" for="checkbox-required-87a17dbe">Tjekbox label<span class="weight-normal"> (*required)</span>
</label>
</fds-checkbox>
<fds-checkbox show-required-status="optional">
<input type="checkbox" name="checkbox-required-example1" id="checkbox-optional-f452f565" class="form-checkbox">
<label class="form-label" for="checkbox-optional-f452f565">Tjekbox label<span class="weight-normal"> (optional)</span>
</label>
</fds-checkbox>Skjult indhold (Collapse)
<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><fds-checkbox>
<input type="checkbox" id="chk22373264" class="form-checkbox" data-aria-controls="exp74ba52c3" data-aria-expanded="false">
<label class="form-label" for="chk22373264">Vis inputfelt</label>
<div class="checkbox-content collapsed" id="exp74ba52c3" aria-hidden="true">
<fds-input>
<label class="form-label" for="inpa866ac0">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
<fds-checkbox>
<input type="checkbox" name="group-disabled" id="checkbox-disabled-b40c4896" disabled>
<label>Deaktiveret tjekboks</label>
</fds-checkbox><fds-checkbox>
<input type="checkbox" name="group-disabled" id="checkbox-disabled-b40c4896" disabled="" class="form-checkbox">
<label class="form-label disabled" for="checkbox-disabled-b40c4896">Deaktiveret tjekboks</label>
</fds-checkbox>Deaktiveret tjekboksgruppe
<fds-checkbox-group>
<fieldset disabled>
<legend>Deaktiveret tjekboks gruppe</legend>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-730a2045" value="v1" id="chk68398f14">
<label>Første tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-730a2045" value="v2" id="chkdd8a37d7">
<label>Anden tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-730a2045" value="v3" id="chk9d53e73a">
<label>Tredje tjekboks</label>
</fds-checkbox>
</fieldset>
</fds-checkbox-group><fds-checkbox-group>
<fieldset disabled="" class="disabled">
<legend class="form-label">Deaktiveret tjekboks gruppe</legend>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-730a2045" value="v1" id="chk68398f14" class="form-checkbox">
<label class="form-label" for="chk68398f14">Første tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-730a2045" value="v2" id="chkdd8a37d7" class="form-checkbox">
<label class="form-label" for="chkdd8a37d7">Anden tjekboks</label>
</fds-checkbox>
<fds-checkbox>
<input type="checkbox" name="checkbox-example-730a2045" value="v3" id="chk9d53e73a" class="form-checkbox">
<label class="form-label" for="chk9d53e73a">Tredje tjekboks</label>
</fds-checkbox>
</fieldset>
</fds-checkbox-group>Konfiguration
fds-checkbox kræver et input- og et label-element. fds-checkbox-group kræver et fieldset-element, der omslutter gruppens legend og de enkelte tjekbokse.
fds-checkbox
Attributter
| Attribut | Beskrivelse |
|---|---|
| show-required-status | Viser om tjekboksen er obligatorisk eller frivillig baseret på required-attributten. Indsæt en tekst i attributten for at overskrive default-teksten. |
| ready | Sæt til "false" for at udskyde initialisering af komponenten. Udelad attributten, eller sæt den til andet end "false", for at initialisere komponenten med det samme. |
fds-help-text
Attributter
| Attribut | Beskrivelse |
|---|---|
| id | ID for hjælpeteksten. Hvis denne er udeladt, genereres et tilfældigt ID. |
| hidden | Skjuler hjælpeteksten. Skal sættes til true eller være tom for at tage effekt. |
Events
| Event | Beskrivelse |
|---|---|
| help-text-callback | Udløses på det omsluttende element, når hjælpeteksten tilføjes, fjernes, eller dens hidden-attribut ændres. |
| help-text-visibility-changed | Udløses på det omsluttende element, når hidden-attributten ændres. event.detail.helptextId indeholder
hjælpetekstens ID, og event.detail.isHidden angiver, om den er skjult. |
fds-error-message
Attributter
| Attribut | Beskrivelse |
|---|---|
| id | ID for fejlbeskeden. Hvis denne er udeladt, genereres et tilfældigt ID. |
| icon-text | Skærmlæsertekst for ikonet. Default er Fejl. |
| hidden | Skjuler fejlbeskeden. Skal sættes til true eller være tom for at tage effekt. |
| targets | Bruges kun af fds-date-input. Angiv ID'er eller navne på de inputfelter, fejlbeskeden er relateret til, separeret med komma. |
| message | Teksten der skal vises i fejlbeskeden. Kan også angives som indhold i elementet. |
Events
| Event | Beskrivelse |
|---|---|
| error-message-callback | Udløses på det omsluttende element, når fejlbeskeden tilføjes, fjernes, eller en af dens attributter ændres. |
| error-message-visibility-changed | Udløses på det omsluttende element, når hidden-attributten ændres. event.detail.errorId indeholder fejlbeskedens ID, og event.detail.isHidden angiver, om den er skjult. |