Checkbox

Release dato: 04.10.2023

Sist oppdatert: 07.07.2025

Checkbox brukes for å gi brukeren mulighet til å krysse av ett eller flere alternativer i en gruppe med valg. Du kan også bruke en enkeltstående checkbox for å be om bekreftelse, for eksempel “Jeg godtar vilkårene” før innsending av et skjema.

Relaterte komponenter

Varianter

Variant	Bruk
Standard	Når checkbox står alene eller i en enkel liste
Tile (med ramme)	Når du vil gruppere flere checkboxer visuelt. Gir tydelig avgrensning og mer luft

Enkeltstående avmerkingsboks med og uten ramme

Variant	Bruk
Enkeltstående	Når checkbox står alene eller i en enkel liste
Gruppe	Gruppér checkboxene når du tilbyr flere valg innenfor samme gruppe eller kategori

Retningslinjer for bruk

Bruk checkbox når

man har en gruppe med valg innenfor samme kontekst
valgene ikke utelukker hverandre
brukeren skal kunne velge ett eller flere alternativer
en bruker skal ha muligheten til å skru et alternativ på/av (for eksempel “akseptere vilkår” for en tjeneste, eller lignende funksjonalitet)

Unngå checkbox når

brukeren kun kan velge ett alternativ (bruk radiobutton i stedet)
det er få alternativer (vurder heller switch eller radiobutton)
det er mer enn 10 alternativer å velge mellom (vurder å bruke select)
det er en binær innstilling som kan beskrives som på/av (bruk switch)

Skriv tydelige etiketter

Sørg for at hver checkbox har en klar og konkret etikett. Etiketten skal beskrive hva valget innebærer, ikke bare “Ja” eller “Nei”.

Gjør slik

Eksempel på klar og konkret etikett — Skriv klar og konkret etikett

Unngå

Eksempel på ufullstendig og uklart innhold.. — Unngå ufullstendig og uklart innhold

Forskjellen på radiobutton og checkbox

Ikke bruk checkboxer dersom brukeren kun kan velge ett valg (gå heller for radiobuttons)

Gjør slik

Eksempel på riktig bruk av radiobuttons — Bruk radiobuttons dersom det ene valget utelukker det andre

Unngå

Opt in, ikke opt out

Checkbox skal alltid brukes som opt-in. Brukeren må selv aktivt krysse av for å gi samtykke (opt in), ikke måtte melde seg av (opt out).

Du skal aldri forhåndsvelge en checkbox for samtykke, for eksempel til å motta nyhetsbrev eller godta vilkår. Dette er et krav i GDPR.

Gjør slik

Unngå

Eksempel på checkbox hvor brukeren selv må melde seg av. — Unngå at brukeren selv må melde seg av

Plassering av checkbox

Plasser checkboxene vertikalt når det er mulig. Det gjør det enklere for brukeren å se hvilket valg som hører til hvilken tekst.

Horisontal plassering bør bare brukes hvis det er to til tre valg, og hvis det gir en mer kompakt løsning.

Har du lange etiketter som kan gå over flere linjer, skal checkboxene alltid plasseres vertikalt for best lesbarhet.

Hvis du har mange valg, bør du liste dem i én kolonne. Da blir det lettere for brukeren å skanne valgene.

Responsivitet

På mobil skal alltid checkboxer ligge vertikalt for optimal lesbarhet.

Husk å teste:

at teksten brytes riktig på små skjermer
at grupperte checkboxer (tile) fortsatt er oversiktlige
at fokusring og klikkeflater fungerer godt på touch

Universell utforming

Skriv en klar, kortfattet og unik label

Alle checkboxer krever en klar, kortfattet og unik label (etikett). For checkboxer uten label, for eksempel de som brukes i en tabell, kreves det fortsatt en skjult etikett for skjermlesere og andre hjelpeteknologier. WCAG 2.1: 1.3.1 Info and Relationships, 2.4.6 Headings and Labels.

Unngå standardvalg

Forhåndsvalgte valg anses som en villedende praksis for alle brukere. Implementer en standard uvalgt tilstand.

Unngå deaktiverte (disabled) checkboxer

Vi anbefaler å unngå disabled på skjemaelementer som radio, checkbox og tekstfelt, fordi det kan skape problemer for tilgjengelighet.

Brukere forstår ofte ikke hvorfor et element er deaktivert. Derfor anbefaler vi å heller vise en feilmelding eller en hjelpetekst, enn å bruke disabled. Hvis du må deaktivere en checkbox, må det være tydelig hvorfor, og hva som må til for å aktivere den igjen.

Tastaturinteraksjoner

Alle tastaturinteraksjoner og ARIA-etiketter må oppfylle tilgjengelighetskriterier.

Bruk fieldset og legend

Bruk fieldset og legend (som inputwrapper tilbyr) ved grupper av avmerkingsbokser.

Les mer om universell utforming av checkbox:

Anatomi

Element	Beskrivelse
1. Checkbox	Selve checkboxen
2. Label	Tekst som beskriver valget
3. Hjelpetekst	Forklaring til valget (valgfritt)

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig før du tester den. Dette kan gjøres ved å kjøre denne kodelinjen før testene kjøres:

await window.customElements.whenDefined("pkt-checkbox");

Om dere bruker data-testid for å hente ut elementer i testene, vil attributten videresendes til selve skjemaelementet. Dersom dere heller ønsker å bruke data-testid på elementet <pkt-checkbox>, må dere sette attributten skipForwardTestid på elementet.

Dersom dere skal teste tilstanden på checked bør dere teste på den visuelle tilstanden med en query mot :checked istedenfor å teste property .checked. Grunnen til dette har vi ikke helt klart å komme til bunns i, da det fungerer helt fint med riktig property i nettleseren. Det kan tenkes at dette kan løses ved å vente et øyeblikk, om det er helt nødvendig å teste property istedenfor synlig tilstand.

I punkt-testing-utils har vi skrevet testen slik: element.querySelectorAll(':checked').length.

Props og tokens

Prop	Type	Beskrivelse
`label`	`string`	Tekst (label)
`checkHelptext`	`string`	Hjelpetekst
`name`	`string`	Navn for innsending
`value`	`string`	Verdi
`id`	`string`	ID
`defaultChecked`	`boolean`	Forhåndsvalgt
`checked`	`boolean`	Huket av
`hasTile`	`boolean`	Boks (tile)
`disabled`	`boolean`	Deaktivert
`hasError`	`boolean`	Feil
`isSwitch`	`boolean`	Switch
`labelPosition`	`right` `left`	Posisjon
`hideLabel`	`boolean`	Skjul tekst/label
`requiredTag`	`Boolean`	Viser en merking som indikerer at feltet er påkrevd
`requiredText`	`string`	Tekst som vises i påkrevd-merkingen
`optionalTag`	`boolean`	Viser en merking som indikerer at feltet er valgfritt
`optionalText`	`string`	Tekst som vises i valgfritt-merkingen
`tagText`	`string`	Tekst som vises i en tag ved siden av label

Event	Beskrivelse
`change`	Returnerer checkboxens verdi når den endres

Checkbox

Test komponenten

Relaterte komponenter

Varianter

Retningslinjer for bruk

Bruk checkbox når

Unngå checkbox når

Skriv tydelige etiketter

Gjør slik

Unngå

Forskjellen på radiobutton og checkbox

Gjør slik

Unngå

Opt in, ikke opt out

Gjør slik

Unngå

Plassering av checkbox

Responsivitet

Universell utforming

Skriv en klar, kortfattet og unik label

Unngå standardvalg

Unngå deaktiverte (disabled) checkboxer

Tastaturinteraksjoner

Bruk fieldset og legend

Anatomi

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Props og tokens