Label
Label er ledeteksten til et skjemafelt.
Egnet til
- Ledetekst koblet til et inputfelt
Uegnet til
- Text uten tilhørende inputfelt
Bruk
Laster...
Tooltip
Laster...
Se Tooltip for full dokumentasjon av props og retningslinjer.
Retningslinjer
Dette er reglene for labeltekst i Indeks. De gjelder alle skjemafelt: tekstfelt, nedtrekkslister, søkefelt, checkboxer og radioknapper.
Navngi dataen, ikke handlingen
1–3 ord er nok. Labelen sier hva feltet inneholder, ikke hva brukeren skal gjøre.
| Gjør dette | Ikke dette |
|---|---|
| Kontonummer | Vennligst oppgi kontonummeret ditt |
| E-postadresse | Skriv inn e-post |
| Fødselsdato | Dato |
| Land | Velg land |
Navngi valget på checkbox og radioknapp
For checkbox og radioknapp er labelen navnet på alternativet, ikke oppfordringen til å velge det. Da ser brukeren hva avhukingen betyr.
| Gjør dette | Ikke dette |
|---|---|
| Motta nyhetsbrev | Meld meg på nyhetsbrev |
| Privat | Velg privat |
| Bedrift | Trykk her for bedrift |
Skriv med stor forbokstav og uten kolon
Labelen er ikke en overskrift og ikke en setning. Ingen kolon på slutten.
Legg formatkrav i description
Ikke strekk labelen for å få plass til krav eller eksempler. Det hører i en description under feltet.
| Gjør dette | Ikke dette |
|---|---|
| Label: "Kontonummer" + description: "11 siffer uten mellomrom" | Label: "Kontonummer (11 siffer uten mellomrom)" |
Plasser labelen tett over feltet
Avstanden mellom label og felt skal være kortere enn avstanden mellom to felt. Da ser øyet hvilken label som hører til hvilket felt, før noen leser et ord.
Merk unntaket, ikke regelen
I banksammenheng er nesten alle felt påkrevd. Merk de valgfrie med "(valgfritt)" i labelteksten, og la de påkrevde stå uten stjerne.
Unngå forkortelser og intern sjargong
Skriv "Organisasjonsnummer", ikke "Org.nr.". Forkortelser kan du bruke når skjemaet er laget for folk som jobber med feltet daglig, som regnskapsførere.
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) ellerhtmlFor(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
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 |