Checkbox

Checkbox lar brukeren velge én eller flere alternativer fra en liste. Hvert valg er uavhengig av de andre, og flere kan være valgt samtidig.

Egnet til

• Når brukeren skal kunne velge flere alternativer samtidig
• Samtykker (f.eks. vilkår eller abonnement)
• Filtrering der flere valg kan kombineres
• Situasjoner der hvert valg er uavhengig av de andre

Uegnet til

• Når brukeren kun skal velge ett alternativ (bruk RadioGroup)
• Lange eller komplekse lister med mange valg
• Situasjoner der valg påvirker hverandre eller er gjensidig utelukkende
• Når det er behov for sterk veiledning eller forklaring per valg

Bruk

Laster...

Strukturen er en naken <input type="checkbox"> med en <label> som søsken inni .ix-checkbox. Selve avkrysningsboksen og haken tegnes som CSS-pseudo-element på labelen — du trenger ingen ekstra markup for indikatoren. Koble label til input med for/id så hele raden blir klikkbar.

Laster...

Eksempler

Med hjelpetekst

Laster...

Laster...

Med feilmelding

Laster...

Laster...

Indeterminate (delvis valgt)

Indeterminate-tilstanden brukes for "velg alle"-checkboxer når noen, men ikke alle, underliggende valg er krysset av.

Laster...

I HTML må indeterminate settes via JavaScript: checkbox.indeterminate = true

Laster...

Deaktivert

Laster...

Laster...

Gruppe med flere checkboxer

Når flere checkboxer hører sammen, bruk CheckboxGroup med CheckboxButton-barn. Gruppen rendres som <ix-checkbox-group> med role="group" (ikke <fieldset>, som har kjente layout-bugger i Safari) og kobler legend, hjelpetekst og feilmelding til gruppen automatisk. value er et array — flere kan være valgt samtidig.

Laster...

Laster...

Retningslinjer

Skriv labelen som navnet på valget

"Motta nyhetsbrev", ikke "Meld meg på nyhetsbrev". Labelen er navnet på det brukeren skrur på, og da er det tydelig hva avhukingen betyr. Label har resten av reglene for labeltekst.

Bruk gruppe når flere valg hører sammen

Én checkbox alene passer når brukeren bekrefter eller godtar noe: vilkår, samtykke, "husk innloggingen". Da er av/på-valget hele poenget, og feltet klarer seg uten kontekst rundt.

Gjelder flere avkryssinger samme spørsmål, hører de i en CheckboxGroup med en legend som sier hva spørsmålet er. Der står også rådene om rekkefølge, orientering og hvor mange valg en liste tåler.

Koble label til input

Med for/id på plass er hele raden klikkbar, ikke bare den lille firkanten. Det er forskjellen på et felt som treffes med tommelen på bussen og et som ikke gjør det.

Bruk checkbox bare når valgene er uavhengige

En checkbox signaliserer at valgene kan kombineres fritt. Utelukker de hverandre, bruk RadioGroup i stedet — ellers oppdager brukeren først etter å ha huket av to bokser at bare én av dem gjaldt.

Bruk indeterminate med forsiktighet

Delvis valgt (indeterminate) hører i hierarkiske lister med en "velg alle" på toppen. Utenfor det mønsteret er strekstilstanden vanskelig å tolke: den ser ut som en tilstand brukeren har satt, men den er beregnet fra barna.

Universell utforming

Hva du selv må sørge for

• Labeltekst som sier hva som velges: «Jeg godtar vilkårene», ikke «Kryss av her». Skjermleseren leser labelen sammen med tilstanden, så teksten må gi mening alene
• Legend på grupper: hører flere checkboxer sammen, bruk CheckboxGroup og gi den en legend. Uten den leses valgene uten kontekst
• Skjult label er fortsatt label: skjuler du teksten visuelt, leses den likevel. Den skal beskrive valget like presist som en synlig label ville
• indeterminate må matche virkeligheten: komponenten viser tilstanden, men du styrer når den gjelder. En «velg alle»-checkbox skal være indeterminate når noen — men ikke alle — underliggende valg er på
• Unngå disabled: et deaktivert valg sier ikke hvorfor det ikke kan velges. Se Deaktiverte tilstander for alternativene

Hva komponenten gjør automatisk

• for/id: label kobles til <input type="checkbox">, med generert ID hvis du ikke oppgir en
• Labelen er klikkflaten: hele label-raden toggler checkboxen, ikke bare boksen
• role="group" med legend i CheckboxGroup, koblet via aria-labelledby. Vi bruker role="group" framfor <fieldset> fordi <fieldset> har kjente layout-bugger i Safari sammen med flex og grid
• indeterminate settes som DOM-property, siden det ikke finnes noe HTML-attributt for det. Skjermleseren annonserer den som «delvis avkrysset»
• aria-invalid: settes når feilmeldingen har innhold
• Windows høykontrast: i forced-colors byttes boks og hake til systemfargene CanvasText, Highlight og HighlightText, fordi bakgrunnsfarger faller bort der
• prefers-reduced-motion: overgangene skrus av

Tilstanden er alltid den native inputens. Boks og hake er ::before og ::after på labelen, slått av og på med :checked og :indeterminate — ingen JavaScript holder det synkronisert, så det kan ikke komme ut av sync.

aria-describedby kobles bare når du sender inn description, errorMessage eller tooltip. Først da wrappes checkboxen i <ix-field>. En checkbox med bare label rendres uten field-wrapper.

Tastaturnavigasjon

Tast	Handling
Tab	Flytter fokus til checkboxen
Shift+Tab	Flytter fokus til forrige fokuserbare element
Space	Toggler checked-tilstand

Skjermleser

• Ved fokus: "[label], avkryssingsboks, ikke avkrysset"
• Når avkrysset: "[label], avkryssingsboks, avkrysset"
• Indeterminate: "[label], avkryssingsboks, delvis avkrysset"
• Ved feil: "[label], avkryssingsboks, ugyldig, [feilmelding]"
• Med description: "[label], avkryssingsboks, [tilstand], [description]"

WCAG-kriterier

Sist gjennomgått: 2026-06-29 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier4 ditt ansvar · 15 håndtert · 37 ikke relevant · 0 ikke på plass

Ditt ansvar (4)

Kriterium	Nivå	Hva du må gjøre
2.4.6 Overskrifter og ledetekster	AA	Skriv beskrivende labeltekst. Labelen skal forklare hva brukeren samtykker til eller velger. "Jeg godtar vilkårene" er bedre enn bare "Godta". Alle checkboxer må ha en label.
3.3.2 Ledetekster eller instruksjoner	A	Skriv beskrivende labeltekst. Labelen skal forklare hva brukeren samtykker til eller velger. "Jeg godtar vilkårene" er bedre enn bare "Godta". Alle checkboxer må ha en label.
4.1.2 Navn, rolle, verdi	A	Håndter indeterminate-tilstand programmatisk. Indeterminate-tilstanden kan ikke settes via HTML-attributt — den må settes via JavaScript (inputRef.indeterminate = true). Bruk denne tilstanden kun for "velg alle"-checkboxer der noen, men ikke alle, underliggende valg er krysset av.
1.3.1 Informasjon og relasjoner	A	Grupper relaterte checkboxer. Når flere checkboxer hører sammen (f.eks. "Velg interesser"), bør de grupperes med CheckboxGroup. Den rendres som <ix-checkbox-group> med role="group" og kobler legend via aria-labelledby — det gir kontekst til skjermleserbrukere uten Safari-layoutbuggene som følger med <fieldset>.

Håndtert av komponenten (15)

Kriterium	Nivå	Hva komponenten gjør
1.3.1 Informasjon og relasjoner	A	Label kobles til checkbox via for/id. Ved bruk av Field kobles description og error via aria-describedby.
1.3.2 Meningsfull rekkefølge	A	Checkbox, label og hjelpetekst følger naturlig rekkefølge i DOM.
1.3.3 Sensoriske egenskaper	A	Checked-tilstand kommuniseres visuelt (hake-ikon) og semantisk (checked-attributt).
1.4.1 Bruk av farge	A	Tilstand kommuniseres med ikon (hake/strek) i tillegg til farge.
1.4.4 Endre tekststørrelse	AA	Relative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Reflower korrekt ned til 320px viewport.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Checkbox-ramme og fokusindikator oppfyller 3:1 kontrastkrav.
2.1.1 Tastatur	A	Fullt opererbart med tastatur. Tab for fokus, Space for å toggle.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut med Tab og Shift+Tab. Ingen tastaturfelle.
2.4.3 Fokusrekkefølge	A	Følger naturlig tab-rekkefølge i DOM.
2.4.7 Synlig fokus	AA	Tydelig fokusindikator med god kontrast.
2.5.8 Målstørrelse (minimum)	AA	Klikkflate er minimum 44x44px.
3.2.1 Ved fokus	A	Fokus trigger ingen kontekstendring.
3.2.2 Ved inndata	A	Toggle trigger ingen automatisk kontekstendring.
4.1.2 Navn, rolle, verdi	A	Native checkbox med implisitt rolle. Tilgjengelig navn fra label. Checked, indeterminate og disabled eksponeres korrekt.

Ikke relevant (37)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A	Hake-ikonet er dekorativt — tilstanden kommuniseres via checked-attributt.
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	A	Ingen medieelementer.
1.2.4 Teksting (direkte)	AA	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	AA	Ingen medieelementer.
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA	Checkbox er ikke et felt for personlig informasjon.
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.12 Tekstavstand	AA	Labeltekst tåler økt spacing, men checkbox-boksen er fast størrelse.
1.4.13 Innhold ved hover eller fokus	AA
2.1.4 Tastatursnarveier	A	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	A	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	A	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	A	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	A	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)	A	Ingen lenker i komponenten.
2.4.5 Flere måter	AA	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.11 Fokus ikke skjult (minimum)	AA	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	A	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	A	Native checkbox — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
3.1.1 Språk på siden	A	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	AA	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.3 Konsistent navigasjon	AA	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	AA	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	A	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.1 Identifikasjon av feil	A	Checkbox har ikke innebygd validering — feilhåndtering styres av konsumenten.
3.3.3 Forslag ved feil	AA
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	AA	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	A	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	AA	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	AA	Ingen statusmeldinger utover feilmelding som håndteres via aria-live.

Props / API

Struktur

En enkeltstående checkbox trenger ingen web component. Strukturen er en naken input med en label som søsken inni .ix-checkbox:

<div class="ix-checkbox">
  <input type="checkbox" id="terms" name="terms" />
  <label for="terms">Jeg godtar vilkårene</label>
</div>

Del	Påkrevd	Beskrivelse
<div class="ix-checkbox">	Ja	Wrapper. Holder input og label som direkte søsken, som er det indikator-stylingen bygger på
<input type="checkbox">	Ja	Selve checkboxen. Visuelt skjult, men i DOM for tastatur og skjermleser
<label>	Ja	Labeltekst og klikkflate. Kobles til input med for/id

Trenger checkboxen hjelpetekst, feilmelding eller tooltip, legger du den inni <ix-field>:

<ix-field>
  <div class="ix-checkbox">
    <input type="checkbox" id="newsletter" name="newsletter" />
    <label for="newsletter">Send meg nyhetsbrev</label>
  </div>
  <span data-field="description">Du kan når som helst melde deg av</span>
  <span data-field="error"></span>
</ix-field>

Del	Påkrevd	Beskrivelse
<ix-field>	Nei	Kobler aria-describedby fra input til hjelpetekst og feilmelding. Trengs bare når du har en av dem
<span data-field="description">	Nei	Hjelpetekst
<span data-field="error">	Ja i <ix-field>	Feilmelding. Alltid i DOM. Tomt betyr ingen feil

Tilstand via native attributter

Attributt	Plassering	Effekt
checked	<input>	Avkrysset
disabled	<input>	Deaktivert. Legg også ix-checkbox--disabled på wrapperen for riktig markør og pointer-events
aria-invalid="true"	<input>	Feiltilstand. Settes automatisk av <ix-field> når feilmeldingen har innhold
tooltip / tooltip-label / tooltip-placement	<ix-field>	Info-knapp i label-raden. tooltip-label er knappens tilgjengelige navn og må oppgis

indeterminate finnes ikke som HTML-attributt. Sett det som DOM-property: checkbox.indeterminate = true.

CheckboxProps

Prop	Type	Påkrevd	Standard	Beskrivelse
label	ReactNode	Ja		Synlig labeltekst. Kobles til input via for/id med generert ID
ariaLabel	string	Nei		Skjult navn på input. Brukes kun når en synlig label ikke er mulig
description	string	Nei		Hjelpetekst. Kobles via aria-describedby
errorMessage	string	Nei		Feilmelding. Setter aria-invalid="true" på input når den har innhold
indeterminate	boolean	Nei	false	Delvis valgt. Settes som DOM-property på input
tooltip	string	Nei		Tooltip-innhold. Gir en info-knapp i label-raden
tooltipLabel	string	Nei		Tilgjengelig navn på info-knappen. Må settes når tooltip er satt, og skal oversettes
tooltipPlacement	'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'right'	Nei	'top'	Plassering av tooltipen
className	string	Nei		CSS-klasse på <ix-field>. Har ingen effekt uten field-wrapper, se under
ref	Ref<HTMLInputElement>	Nei		Ref videresendes til <input>-elementet

I tillegg støttes alle standard HTML input-attributter (name, value, checked, defaultChecked, disabled, required, onChange, onBlur, id, aria-*, osv.) som settes direkte på komponenten og sendes videre til <input>. type håndteres av komponenten.

description, errorMessage og tooltip er det som avgjør om komponenten wrappes i <ix-field>. Er ingen av dem satt, rendres bare .ix-checkbox-blokken, og className har ingenting å sitte på. Trenger du en klasse på selve wrapperen uten hjelpetekst, sett den i HTML i stedet.

Skal flere checkboxer høre sammen under en felles legend, bruk CheckboxGroup framfor flere Checkbox.

Tilpasning med CSS

.ix-checkbox styler naken markup: input[type="checkbox"] og <label> som direkte søsken. Boksen og glyfen tegnes som label::before og label::after, togglet av nabo-kombinatoren input:checked + label og input:indeterminate + label. Du trenger ingen ekstra markup for indikatoren.

BEM-klassene .ix-checkbox__input og .ix-checkbox__label er valgfrie hooks for forfattere som vil ha eksplisitte selektorer. Stilene treffer begge former.

Tilgjengelige klasser og selektorer

Element / tilstand	Selektor
Wrapper	.ix-checkbox
Deaktivert wrapper	.ix-checkbox--disabled
Input, visuelt skjult (valgfri hook)	.ix-checkbox__input
Label med indikator (valgfri hook)	.ix-checkbox__label
Boksen	label::before
Hake eller strek	label::after
Avkrysset	input:checked + label
Delvis valgt	input:indeterminate + label
Feil	input[aria-invalid="true"] + label
Deaktivert	input:disabled + label
Fokusring	input:focus-visible + label::before

Lokale CSS-variabler

Disse er interne (--ii-) og settes på labelen. De kan endres uten varsel, men er tilgjengelige hvis du må justere en flate.

Variabel	Standard	Beskrivelse
--ii-checkbox-size	24px	Bredde og høyde på boksen, og minimumshøyde på klikkflaten
--ii-checkbox-box-bg	--ix-color-fill-interactive-default	Bakgrunn i boksen. Byttes av hover, checked, indeterminate og feil
--ii-checkbox-box-border	--ix-color-border-main-default	Kantfarge på boksen. Settes til transparent når boksen er fylt

Eksempel: ren HTML

<div class="ix-checkbox">
  <input type="checkbox" id="samtykke" name="samtykke" />
  <label for="samtykke">Jeg godtar vilkårene</label>
</div>

Relatert

• CheckboxGroup — når flere checkboxer hører sammen under en legend
• Label — reglene for labeltekst
• RadioGroup — når kun ett alternativ kan velges
• ValidationMessage — feilmeldingsteksten