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 RadioButton)
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

Kom i gang

Result

Kode

Live Editor

<Checkbox label="Jeg godtar vilkårene" name="terms" />

Result

Kode

Live Editor

<label className="ix-checkbox">
  <input type="checkbox" className="ix-checkbox__input" name="terms" />
  <span className="ix-checkbox__box">
    <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
      <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  </span>
  <span className="ix-checkbox__label">Jeg godtar vilkårene</span>
</label>

Eksempler

Med hjelpetekst

Result

Kode

Live Editor

<Checkbox
  label="Send meg nyhetsbrev"
  description="Du kan når som helst melde deg av"
  name="newsletter"
/>

Result

Kode

Live Editor

<ix-field>
  <label className="ix-checkbox">
    <input type="checkbox" className="ix-checkbox__input" name="newsletter" />
    <span className="ix-checkbox__box">
      <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
    <span className="ix-checkbox__label">Send meg nyhetsbrev</span>
  </label>
  <span data-field="description">Du kan når som helst melde deg av</span>
  <span data-field="error"></span>
</ix-field>

Med feilmelding

Result

Kode

Live Editor

<Checkbox
  label="Jeg godtar vilkårene"
  errorMessage="Du må godta vilkårene for å fortsette"
  name="terms"
/>

Result

Kode

Live Editor

<ix-field>
  <label className="ix-checkbox">
    <input type="checkbox" className="ix-checkbox__input" name="terms" aria-invalid="true" />
    <span className="ix-checkbox__box">
      <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
    <span className="ix-checkbox__label">Jeg godtar vilkårene</span>
  </label>
  <span data-field="error">Du må godta vilkårene for å fortsette</span>
</ix-field>

Indeterminate (delvis valgt)

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

Result

Kode

Live Editor

<Checkbox label="Velg alle" indeterminate name="select-all" />

Result

Kode

Live Editor

function IndeterminateCheckbox() {
  const ref = React.useRef(null);
  React.useEffect(() => {
    if (ref.current) ref.current.indeterminate = true;
  }, []);
  return (
    <label className="ix-checkbox">
      <input ref={ref} type="checkbox" className="ix-checkbox__input" name="select-all" />
      <span className="ix-checkbox__box">
        <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
        <svg className="ix-checkbox__icon ix-checkbox__icon--indeterminate" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M3 8H13" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
        </svg>
      </span>
      <span className="ix-checkbox__label">Velg alle</span>
    </label>
  );
}

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

Deaktivert

Result

Kode

Live Editor

<>
  <Checkbox label="Ikke tilgjengelig" disabled />
  <Checkbox label="Allerede godtatt" disabled defaultChecked />
</>

Result

Kode

Live Editor

<>
  <label className="ix-checkbox ix-checkbox--disabled">
    <input type="checkbox" className="ix-checkbox__input" disabled />
    <span className="ix-checkbox__box">
      <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
    <span className="ix-checkbox__label">Ikke tilgjengelig</span>
  </label>
  <label className="ix-checkbox ix-checkbox--disabled">
    <input type="checkbox" className="ix-checkbox__input" disabled defaultChecked />
    <span className="ix-checkbox__box">
      <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
      </svg>
    </span>
    <span className="ix-checkbox__label">Allerede godtatt</span>
  </label>
</>

Gruppe med flere checkboxer

Result

Kode

Live Editor

<fieldset style={{ border: 'none', padding: 0, margin: 0 }}>
  <legend style={{ fontWeight: 'var(--ix-font-weight-medium)', marginBottom: '8px' }}>
    Hvordan vil du bli kontaktet?
  </legend>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <Checkbox label="E-post" name="contact" value="email" />
    <Checkbox label="SMS" name="contact" value="sms" />
    <Checkbox label="Telefon" name="contact" value="phone" />
  </div>
</fieldset>

Result

Kode

Live Editor

<fieldset style={{ border: 'none', padding: 0, margin: 0 }}>
  <legend style={{ fontWeight: 'var(--ix-font-weight-medium)', marginBottom: '8px' }}>
    Hvordan vil du bli kontaktet?
  </legend>
  <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
    <label className="ix-checkbox">
      <input type="checkbox" className="ix-checkbox__input" name="contact" value="email" />
      <span className="ix-checkbox__box">
        <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span className="ix-checkbox__label">E-post</span>
    </label>
    <label className="ix-checkbox">
      <input type="checkbox" className="ix-checkbox__input" name="contact" value="sms" />
      <span className="ix-checkbox__box">
        <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span className="ix-checkbox__label">SMS</span>
    </label>
    <label className="ix-checkbox">
      <input type="checkbox" className="ix-checkbox__input" name="contact" value="phone" />
      <span className="ix-checkbox__box">
        <svg className="ix-checkbox__icon ix-checkbox__icon--check" viewBox="0 0 16 16" fill="none" aria-hidden="true">
          <path d="M13.5 4.5L6 12L2.5 8.5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
        </svg>
      </span>
      <span className="ix-checkbox__label">Telefon</span>
    </label>
  </div>
</fieldset>

Retningslinjer

Tydelige labels gir forutsigbarhet

Alle checkboxer skal ha en synlig og beskrivende label. Labelen skal beskrive hva som blir valgt, ikke hva brukeren skal gjøre.

For eksempel bør man skrive "Motta nyhetsbrev" i stedet for "Meld meg på nyhetsbrev". Når labelen beskriver selve valget, blir det enklere å forstå hva som skjer når checkboxen hukes av.

Dette gjør det lettere å skanne listen og reduserer risikoen for misforståelser.

Checkbox bør som hovedregel brukes i gruppe

Checkboxer bør som hovedregel presenteres som en del av en gruppe med flere valg. Dette gjør det tydelig for brukeren at de kan velge ett eller flere alternativer, og gir nødvendig kontekst for hva valgene gjelder.

Når flere checkboxer hører sammen, bør de grupperes både visuelt og semantisk, gjerne med en overskrift eller legend.

En enkeltstående checkbox kan likevel brukes i noen tilfeller, typisk når brukeren skal bekrefte eller godta noe, som for eksempel vilkår eller samtykke. I slike situasjoner representerer checkboxen et tydelig av/på-valg, og fungerer godt alene.

Hele raden skal være klikkbar

Både checkboxen og tilhørende label skal være klikkbar. Dette gir en større trefflate og gjør komponenten enklere å bruke, spesielt på mobil og for brukere med nedsatt motorikk.

En større klikkeflate gir en mer robust og tilgivende brukeropplevelse.

Orientering som liste gir bedre skannbarhet

Alternativene skal som hovedregel vises vertikalt, én under den andre. Dette gjør det enklere å skanne listen og sammenligne valgene.

Horisontal plassering gjør det vanskeligere å lese, spesielt når teksten er ulik i lengde. Det kan også skape utfordringer for brukere som zoomer inn på siden, da innholdet lettere brytes på uforutsigbare måter.

Rekkefølge påvirker hvor lett det er å finne frem

I de fleste tilfeller bør alternativene sorteres alfabetisk, slik at brukeren raskt kan finne det de leter etter.

I noen tilfeller kan det være mer hensiktsmessig å prioritere de mest relevante eller brukte valgene øverst. Dette kan redusere tiden det tar å gjøre et valg, særlig i lengre lister.

Bruk checkbox når valgene er uavhengige

Checkboxer signaliserer at flere valg kan gjøres samtidig. Det er derfor viktig at valgene faktisk er uavhengige av hverandre.

Dersom valg påvirker hverandre eller er gjensidig utelukkende, bør man vurdere andre komponenter, som RadioButton.

Bruk indeterminate med forsiktighet

Indeterminate-tilstand (delvis valgt) kan brukes i hierarkiske valg, som "velg alle". Denne tilstanden bør kun brukes når det er tydelig hva den representerer.

Uten tydelig kontekst kan den være vanskelig å forstå og føre til usikkerhet hos brukeren.

Unngå for mange valg samtidig

Store lister med mange checkboxer kan bli krevende å navigere i. Når antall valg øker, øker også den kognitive belastningen.

Dersom listen blir lang, bør man vurdere å dele opp innholdet, bruke filtrering eller andre mekanismer for å gjøre det enklere å orientere seg.

Tilgjengelighet / universell utforming

Semantisk struktur og kobling mellom label og felt

Checkbox skal implementeres med korrekt HTML (<input type="checkbox">) og ha en programmessig koblet label. Dette gjør at skjermlesere kan formidle hva valget gjelder og hvilken tilstand det har.

Når flere checkboxer hører sammen, skal de grupperes med fieldset og legend. Dette gir nødvendig kontekst og gjør det tydelig hva valgene gjelder.

Label og legend må være tilgjengelige

Alle checkboxer må ha en tydelig label, og grupper må ha en beskrivende legend. Skjermlesere leser disse sammen med tilstanden (valgt/ikke valgt), og uten denne informasjonen mister brukeren viktig kontekst.

Teksten skal være konkret og beskrive hva som velges, slik at brukeren forstår konsekvensen av valget.

Skjule label eller legend visuelt

Hver checkbox må ha en tydelig label, og grupper av relaterte checkboxer må ha en beskrivende legend. Dersom teksten skjules visuelt, må den fortsatt være tilgjengelig for hjelpemidler.

Selv om teksten ikke er synlig, må den fortsatt være meningsfull og beskrivende. Skjermlesere leser fortsatt denne informasjonen, og den er avgjørende for at brukeren skal forstå hva valget gjelder.

Tydelig fokus og tastaturnavigasjon

Checkboxer skal være fullt opererbare med tastatur. Brukeren skal kunne navigere med Tab og endre tilstand med Space.

Fokusindikatoren må være tydelig og ha god kontrast, slik at det er enkelt å se hvilken checkbox som er aktiv.

Indeterminate må formidles korrekt

Dersom indeterminate-tilstand brukes, må denne formidles korrekt til hjelpemidler. Dette sikrer at også ikke-visuelle brukere forstår tilstanden.

Vær bevisst på bruk av disabled

Bruk av disabled state frarådes. Et deaktivert valg kan være vanskelig å oppfatte og forstå, spesielt dersom brukeren ikke får noen forklaring på hvorfor det ikke kan velges.

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-05-27 — 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 fieldset og legend for å gi kontekst til skjermleserbrukere.

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.

Egnet til​

Uegnet til​

Kom i gang​

Eksempler​

Med hjelpetekst​

Med feilmelding​

Indeterminate (delvis valgt)​

Deaktivert​

Gruppe med flere checkboxer​

Retningslinjer​

Tydelige labels gir forutsigbarhet​

Checkbox bør som hovedregel brukes i gruppe​

Hele raden skal være klikkbar​

Orientering som liste gir bedre skannbarhet​

Rekkefølge påvirker hvor lett det er å finne frem​

Bruk checkbox når valgene er uavhengige​

Bruk indeterminate med forsiktighet​

Unngå for mange valg samtidig​

Tilgjengelighet / universell utforming​

Semantisk struktur og kobling mellom label og felt​

Label og legend må være tilgjengelige​

Skjule label eller legend visuelt​

Tydelig fokus og tastaturnavigasjon​

Indeterminate må formidles korrekt​

Vær bevisst på bruk av disabled​

Tastaturnavigasjon

Skjermleser

WCAG-kriterier​

Egnet til

Uegnet til

Kom i gang

Eksempler

Med hjelpetekst

Med feilmelding

Indeterminate (delvis valgt)

Deaktivert

Gruppe med flere checkboxer

Retningslinjer

Tydelige labels gir forutsigbarhet

Checkbox bør som hovedregel brukes i gruppe

Hele raden skal være klikkbar

Orientering som liste gir bedre skannbarhet

Rekkefølge påvirker hvor lett det er å finne frem

Bruk checkbox når valgene er uavhengige

Bruk indeterminate med forsiktighet

Unngå for mange valg samtidig

Tilgjengelighet / universell utforming

Semantisk struktur og kobling mellom label og felt

Label og legend må være tilgjengelige

Skjule label eller legend visuelt

Tydelig fokus og tastaturnavigasjon

Indeterminate må formidles korrekt

Vær bevisst på bruk av disabled

WCAG-kriterier