ValidationMessage

ValidationMessage viser en feilmelding knyttet til et skjemafelt eller en feltgruppe.

Egnet til

Feilmelding under et inputfelt eller en feltgruppe (f.eks. RadioGroup)
Korte, handlingsrettede meldinger om hva som må rettes

Uegnet til

Generelle informasjonsmeldinger som ikke er feil
Suksess- eller advarselsmeldinger som ikke trenger rød styling

Kom i gang

ValidationMessage rendrer et <span data-field="error"> som styles av Indeks-CSS. Når elementet ligger inne i en <ix-field> eller <ix-radio-group>, kobles det automatisk til input via aria-describedby og setter aria-invalid="true" på inputen når meldingen har innhold.

Result

Kode

Live Editor

<ValidationMessage>Du må velge et alternativ</ValidationMessage>

Bruk inne i ix-field

<ix-field> finner automatisk elementer med data-field="error" og kobler dem til inputen via aria-describedby. Hold elementet i DOM hele tiden (også når det er tomt) — <ix-field> setter aria-live="polite" slik at skjermlesere fanger opp endringer.

Result

Kode

Live Editor

<TextField
  label="E-postadresse"
  type="email"
  errorMessage="Du må oppgi en gyldig e-postadresse"
/>

I React-komponenter som TextField og Select er errorMessage-propen den foretrukne måten — den rendrer <ValidationMessage> internt. Bruk <ValidationMessage> direkte når du komponerer felt manuelt eller jobber med gruppe-komponenter som <RadioGroup>.

Retningslinjer

Vær konkret om hva som må rettes

Beskriv hva brukeren må gjøre, ikke hva som er feil i abstrakte termer.

Gjør dette	Ikke dette
Du må fylle ut kontonummer	Ugyldig verdi
Beløpet må være større enn 0	Ugyldig beløp
Velg en kundetype	Påkrevd felt

Hold meldingen kort

Én setning er nok. Detaljerte krav hører hjemme i description, ikke i feilmeldingen.

Hold elementet i DOM

Når du veksler mellom feil og ingen feil, behold <span data-field="error"> i DOM og endre kun innholdet. Hvis elementet legges til/fjernes dynamisk, kan skjermleseren miste oppdateringen — aria-live-regioner må være i DOM før innholdet endres.

Universell utforming

Hva du selv må sørge for

Skriv konkret feilmeldingstekst — beskriv hva brukeren må gjøre, ikke bare at noe er feil
Hold elementet i DOM — ikke fjern det når feilmeldingen er borte. Sett innholdet til en tom streng i stedet, slik at aria-live kan kunngjøre framtidige endringer
Plasser den nær feltet — feilmeldingen skal stå i nærheten av input-elementet i DOM-rekkefølgen, så koblingen blir tydelig både visuelt og for skjermlesere

Skjermleser

Leses opp etter labelteksten på inputen den er koblet til (via aria-describedby), når inputen har fokus
Endringer i innholdet kunngjøres polite via aria-live (satt av ix-field eller ix-radio-group)
Inputen annonseres som «ugyldig» når elementet har innhold (aria-invalid="true")

WCAG-kriterier

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

WCAG-kriterier6 ditt ansvar · 7 håndtert · 45 ikke relevant · 0 ikke på plass

Ditt ansvar (6)

Kriterium	Nivå	Hva du må gjøre
3.3.1 Identifikasjon av feil	A	Skriv konkret feilmeldingstekst. Meldingen skal forklare hva brukeren må gjøre, ikke bare at noe er feil. "Du må fylle ut kontonummer" er bedre enn "Ugyldig verdi".
3.3.3 Forslag ved feil	AA	Skriv konkret feilmeldingstekst. Meldingen skal forklare hva brukeren må gjøre, ikke bare at noe er feil. "Du må fylle ut kontonummer" er bedre enn "Ugyldig verdi".
4.1.3 Statusmeldinger	AA	Hold elementet i DOM. Behold <span data-field="error"> i DOM også når feilen er borte. Sett innholdet til en tom streng i stedet for å fjerne elementet. aria-live-regioner må være i DOM før innholdet endres for at skjermlesere skal fange opp oppdateringer.
1.3.1 Informasjon og relasjoner	A	Plasser meldingen nær feltet. ValidationMessage skal stå i nærheten av tilhørende input i DOM-rekkefølgen. Inne i <ix-field> eller <ix-radio-group> kobles den automatisk via aria-describedby. Bruker du komponenten alene, må du selv sette aria-describedby på input til id-en på meldingen.
1.3.2 Meningsfull rekkefølge	A	Plasser meldingen nær feltet. ValidationMessage skal stå i nærheten av tilhørende input i DOM-rekkefølgen. Inne i <ix-field> eller <ix-radio-group> kobles den automatisk via aria-describedby. Bruker du komponenten alene, må du selv sette aria-describedby på input til id-en på meldingen.
3.3.1 Identifikasjon av feil	A	Plasser meldingen nær feltet. ValidationMessage skal stå i nærheten av tilhørende input i DOM-rekkefølgen. Inne i <ix-field> eller <ix-radio-group> kobles den automatisk via aria-describedby. Bruker du komponenten alene, må du selv sette aria-describedby på input til id-en på meldingen.

Håndtert av komponenten (7)

Kriterium	Nivå	Hva komponenten gjør
1.4.3 Kontrast (minimum)	AA	Feilmeldingsteksten bruker --ix-color-foreground-danger-default. Forventes å oppfylle 4,5:1 mot standard bakgrunn. Kontroller med kontrastverktøy ved egendefinerte bakgrunnsfarger.
1.4.1 Bruk av farge	A	Feilmeldingen formidles ikke kun med farge — teksten beskriver feilen eksplisitt, og inputen får aria-invalid="true" via ix-field/ix-radio-group.
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.
3.3.1 Identifikasjon av feil	A	Identifiserer feil i input via aria-invalid (settes av ix-field/ix-radio-group) og kobler beskrivende feilmelding via aria-describedby.
4.1.3 Statusmeldinger	AA	ix-field/ix-radio-group setter aria-live="polite" på elementet slik at endringer kunngjøres til skjermlesere.

Ikke relevant (45)

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.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	ValidationMessage 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	Ikke interaktiv.
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.6 Overskrifter og ledetekster	AA	Ikke en label eller heading.
2.4.7 Synlig fokus	AA	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.2 Ledetekster eller instruksjoner	A	Komponenten er ikke selv en label — den viser feilmeldingen om en label/input.
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.2 Navn, rolle, verdi	A

Props / API

`[data-field="error"]`

Et element med data-field="error" styles automatisk av Indeks-CSS som en feilmelding (rød tekst, riktig spacing). Inne i <ix-field> eller <ix-radio-group> kobles det også til input via aria-describedby, og inputen får aria-invalid="true" når elementet har innhold.

<span data-field="error">Du må velge et alternativ</span>