Label

Label er ledeteksten til et skjemafelt.

Egnet til

• Ledetekst koblet til et inputfelt

Uegnet til

• Text uten tilhørende inputfelt

Kom i gang

Result

Loading...

Kode

Live Editor

<div>
  <label class="ix-label" for="konto-html">Kontonummer</label>
  <div class="ix-text-field"><input id="konto-html" type="text" /></div>
</div>

Result

Loading...

Kode

Live Editor

<div>
  <Label htmlFor="konto">Kontonummer</Label>
  <div className="ix-text-field"><input id="konto" type="text" /></div>
</div>

Bruk med ix-field

ix-label er en CSS-klasse. Bruker du <ix-field>, trenger du den ikke — <ix-field> styler <label>-elementet inni seg automatisk:

Result

Loading...

Kode

Live Editor

<ix-field>
  <label for="konto-field">Kontonummer</label>
  <span data-field="description">11 siffer uten mellomrom</span>
  <div class="ix-text-field">
    <input id="konto-field" type="text" inputMode="numeric" />
  </div>
  <span data-field="error"></span>
</ix-field>

Bruker du ikke <ix-field>, legger du ix-label-klassen på <label>-elementet selv — som i "Kom i gang"-eksemplet over.

Tooltip

Result

Loading...

Kode

Live Editor

<ix-field tooltip="Fullt juridisk navn som det står i passet" tooltip-label="Mer informasjon om Navn">
  <label for="navn-tooltip">Navn</label>
  <div class="ix-text-field"><input id="navn-tooltip" type="text" /></div>
  <span data-field="error"></span>
</ix-field>

Result

Loading...

Kode

Live Editor

<TextField
  label="Navn"
  inputId="navn-tooltip-react"
  tooltip="Fullt juridisk namn som det står i passet"
  tooltipLabel="Mer informasjon om Navn"
/>

Se Tooltip for full dokumentasjon av props og retningslinjer.

Retningslinjer

Kort og presis

1–3 ord er ideelt. Labelen skal navngi dataen, ikke beskrive handlingen.

Gjør dette	Ikke dette
Kontonummer	Vennligst oppgi kontonummeret ditt
E-postadresse	Skriv inn e-post
Fødselsdato	Dato

Setningsformat uten kolon

Stor forbokstav, ingen kolon på slutten.

Formatkrav hører hjemme i description

Ikke gjør labelen lang for å få plass til krav eller eksempler. Bruk en description under feltet i stedet.

Gjør dette	Ikke dette
Label: "Kontonummer" + description: "11 siffer uten mellomrom"	Label: "Kontonummer (11 siffer uten mellomrom)"

Visuell nærhet

Label skal stå tett over feltet den tilhører. Kortere avstand mellom label og input enn mellom to felt gjør koblingen tydelig for øyet.

Merk unntaket, ikke regelen

I banksammenheng er nesten alle felt påkrevd. Merk valgfrie felt med "(valgfritt)" i labelteksten. Ikke merk påkrevde felt med stjerne.

Unngå forkortelser og intern sjargong

Skriv ut ord med mindre målgruppen er fagpersoner som kjenner dem godt. "Organisasjonsnummer", ikke "Org.nr." — med mindre skjemaet er rettet mot regnskapsførere eller lignende.

Universell utforming

Hva du selv må sørge for

• Meningsfull labeltekst — labelen skal forklare hva som skal fylles inn, ikke handlingen. "E-postadresse" er bedre enn "Skriv inn e-post"
• Koble label til input — sett for (HTML) eller htmlFor (React) til ID-en på inputfeltet. Uten denne koblingen kan skjermlesere ikke assosiere labelen med feltet

Skjermleser

• Label er ikke fokusbar — leses opp som del av det tilkoblede inputfeltets tilgjengelige navn
• Ved fokus på inputfeltet: "[labeltekst], [rolle]" — labelteksten leses automatisk

WCAG-kriterier

Sist gjennomgått: 2026-05-12 — alle 56 WCAG 2.2-kriterier vurdert

WCAG-kriterier5 ditt ansvar · 5 håndtert · 46 ikke relevant · 0 ikke på plass

Ditt ansvar (5)

Kriterium	Nivå	Hva du må gjøre
2.4.6 Overskrifter og ledetekster	AA	Skriv beskrivende labeltekst. Labelen skal forklare hva som skal fylles inn — ikke handlingen. "E-postadresse" er bedre enn "Skriv inn e-post".
3.3.2 Ledetekster eller instruksjoner	A	Skriv beskrivende labeltekst. Labelen skal forklare hva som skal fylles inn — ikke handlingen. "E-postadresse" er bedre enn "Skriv inn e-post".
1.3.1 Informasjon og relasjoner	A	Koble label til input. Sett for (HTML) eller htmlFor (React) til ID-en på tilhørende inputfelt. Uten denne koblingen kan ikke skjermlesere assosiere labelen med feltet, og klikk på label aktiverer ikke input.
2.4.6 Overskrifter og ledetekster	AA	Koble label til input. Sett for (HTML) eller htmlFor (React) til ID-en på tilhørende inputfelt. Uten denne koblingen kan ikke skjermlesere assosiere labelen med feltet, og klikk på label aktiverer ikke input.
1.3.2 Meningsfull rekkefølge	A	Plasser label foran input i DOM. Label skal stå før inputfeltet i DOM-rekkefølgen for å gi en logisk lesesekvens. Komponenten styrer ikke plasseringen — det er opp til konsumenten.

Håndtert av komponenten (5)

Kriterium	Nivå	Hva komponenten gjør
1.4.3 Kontrast (minimum)	AA	Labelteksten bruker --ix-color-foreground-main-default. Forventes å oppfylle 4,5:1 mot standard bakgrunn. Kontroller med kontrastverktøy ved egendefinerte bakgrunnsfarger.
1.4.4 Endre tekststørrelse	AA	Bruker --ix-font-size-md (relativ enhet) — skalerer korrekt ved 200 % zoom.
1.4.10 Omflyt	AA	Reflower korrekt ned til 320px viewport.
1.4.12 Tekstavstand	AA	Tåler økt line-height, bokstav- og ordavstand uten tap av innhold.
4.1.2 Navn, rolle, verdi	A	Native <label>-element med implisitt semantikk. Tilgjengelig navn eksponeres automatisk til skjermlesere.

Ikke relevant (46)

Kriterium	Nivå	Hvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold	A
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.3 Sensoriske egenskaper	A
1.3.4 Visningsretning	AA	Ingen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndata	AA
1.4.1 Bruk av farge	A
1.4.2 Styring av lyd	A	Ingen lydelementer.
1.4.5 Bilder av tekst	AA	Ingen bilder av tekst.
1.4.11 Kontrast for ikke-tekstlig innhold	AA	Label er ikke en UI-komponent med ramme eller ikon — kun tekst.
1.4.13 Innhold ved hover eller fokus	AA
2.1.1 Tastatur	A	Label er ikke interaktiv i seg selv. Klikk-til-input er nettleserens innebygde oppførsel.
2.1.2 Ingen tastaturfelle	A
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.3 Fokusrekkefølge	A
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.7 Synlig fokus	AA	Label er ikke fokuserbar.
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
2.5.4 Bevegelsesaktivering	A	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	A
2.5.7 Drabevegelser	A	Ingen drag-and-drop.
2.5.8 Målstørrelse (minimum)	AA	Inline-element — unntatt fra minimumskravet på 24×24 px (inline exception).
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.1 Ved fokus	A
3.2.2 Ved inndata	A
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
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

Props / API

.ix-label

Legg til klassen ix-label på et <label>-element:

<label class="ix-label" for="input-id">Labeltekst</label>

for-attributtet kobler label til input. Uten for er labelen ikke programmatisk koblet til feltet.

LabelProps

Prop	Type	Påkrevd	Beskrivelse
children	ReactNode	Nei	Labelteksten
htmlFor	string	Nei*	Kobler label til input via for-attributt. *Alltid anbefalt
className	string	Nei	Ekstra CSS-klasser
ref	Ref<HTMLLabelElement>	Nei	Ref videresendes til <label>-elementet

I tillegg støttes alle standard HTML label-attributter.

Tilpasning med CSS

Label har ingen egne CSS-variabler å overstyre. Typografien arves fra token-systemet:

Egenskap	Token
Skriftstørrelse	--ix-font-size-md
Fontvekt	--ix-font-weight-medium
Farge	--ix-color-foreground-main-default
Linjehøyde	1.2

Relatert

• TextField — feltstruktur med label, input, hjelpetekst og feilmelding
• Typografi — skriftstørrelser og fontvekter