ValidationMessage

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

Success-tilstand er under vurdering

Komponenten støtter i dag kun error-tilstand. Figma viser også en success-variant (grønt ikon + grønn tekst), men vi har ikke tatt den i bruk ennå. Før vi implementerer success må vi avklare:

• Når gir bekreftelse faktisk verdi? Success-meldinger på hvert felt kan skape støy og over-annonsering for skjermlesere.
• Hvordan annonseres den? ix-field setter i dag aria-live="polite" for feil. Success bør ikke avbryte, men vi må sikre at den ikke dobbelt-annonseres sammen med feil.
• Skal aria-invalid fjernes? Success og error deler i dag samme [data-field="error"]-slot og aria-invalid-logikk i ix-field.

API-et er forberedt for å utvides med en variant/status senere uten brytende endringer. Ta kontakt med designsystem-teamet før du bygger på success.

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 (success-tilstand er under vurdering — se notatet øverst)

Kom i gang

ValidationMessage rendrer et <span data-field="error"> med et dekorativt feilikon (en badge — hvit glyf på rød sirkel) foran teksten. Elementet styles av Indeks-CSS. Når det 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

Loading...

Kode

Live Editor

<span data-field="error">
  <ix-icon data-badge data-status="danger" name="close" aria-hidden="true" />
  Du må velge et alternativ
</span>

Result

Loading...

Kode

Live Editor

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

Ikonet er dekorativt (aria-hidden) — feilen formidles av teksten. Slå det av med showIcon={false} (React) eller ved å utelate <ix-icon> (HTML) i de sjeldne tilfellene der ikonet ikke passer.

Result

Loading...

Kode

Live Editor

<ValidationMessage showIcon={false}>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

Loading...

Kode

Live Editor

<ix-field>
  <label for="email-error">E-postadresse</label>
  <div class="ix-text-field">
    <input id="email-error" type="email" />
  </div>
  <span data-field="error">Du må oppgi en gyldig e-postadresse</span>
</ix-field>

Result

Loading...

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, det dekorative badge-ikonet forsterker den visuelt, 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	Badge-ikonet er dekorativt (aria-hidden) — feilen formidles av teksten, så ikonet har ingen kontrastkrav som ikke-tekstlig innhold.
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, ikon-layout). 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. Feilikonet skrives som et dekorativt <ix-icon data-badge> foran teksten — utelat det for å skjule ikonet.

<span data-field="error">
  <ix-icon data-badge data-status="danger" name="close" aria-hidden="true"></ix-icon>
  Du må velge et alternativ
</span>

ValidationMessageProps

Prop	Type	Påkrevd	Beskrivelse
children	ReactNode	Nei	Feilmeldingsteksten
showIcon	boolean	Nei	Vis det dekorative feilikonet foran teksten. Standard true.
id	string	Nei	ID på elementet — nødvendig hvis du kobler manuelt med aria-describedby
className	string	Nei	Ekstra CSS-klasser
ref	Ref<HTMLSpanElement>	Nei	Ref videresendes til <span>-elementet

I tillegg støttes alle standard HTML-attributter på span.

Tilpasning med CSS

ValidationMessage styles av globale regler på [data-field="error"] i form/validation-message.css. Det finnes ingen egne CSS-variabler for komponenten — typografi, farge og ikon-badge arves fra token-systemet:

Egenskap	Token
Skriftstørrelse	--ix-font-size-md
Tekstfarge	--ix-color-foreground-danger-default
Ikon-badge sirkelfarge	--ix-color-status-fill (via data-status="danger")
Ikon-badge størrelse	--ix-icon-badge-size (satt til --ix-font-size-lg)

Relatert

• Label — ledeteksten til et skjemafelt
• TextField — feltstruktur med label, input, hjelpetekst og feilmelding