TextField

TextField er et inputfelt for kortere tekst eller tall, som kontonummer, e-postadresse eller beløp.

Egnet til

Kortere tekstinput (én linje)
Input med klart forventet format

Uegnet til

Lengre fritekst. Bruk TextArea i stedet.
Komplekse eller sammensatte input (f.eks. dato med flere felt)
Valg fra forhåndsdefinerte alternativer. Bruk select, radio eller checkbox.

Kom i gang

React
HTML

Live Editor

<TextField
  label="Kontonummer"
  description="11 siffer uten mellomrom"
/>

Result

Prøv å endre label eller description direkte i editoren. Komponenten kobler for/id og aria-describedby automatisk.

Live Editor

<ix-field>
  <label>Kontonummer</label>
  <span data-field="description">11 siffer uten mellomrom</span>
  <div className="ix-text-field">
    <input className="ix-text-field__input" type="text" inputMode="numeric" name="accountNumber" />
  </div>
  <span data-field="error"></span>
</ix-field>

Result

<ix-field> setter opp alle ARIA-koblinger automatisk. Error-elementet skal alltid ligge i DOM. Tomt betyr ingen feil.

Eksempler

Unngå type="number"

type="number" gir uforutsigbar oppførsel: stepper-knapper, scrollhjul endrer verdi, og nettlesere kan fjerne ledende nuller (kontonummer!). Bruk inputMode="numeric" i stedet. Det gir talltastatur på mobil uten disse problemene.

Med feilmelding

Når valideringen feiler, vis en feilmelding som sier hva som er galt og hva brukeren skal gjøre:

React
HTML

Live Editor

<TextField
  label="Kontonummer"
  description="11 siffer uten mellomrom"
  errorMessage="Kontonummer må ha 11 siffer"
  inputProps={{ inputMode: 'numeric' }}
/>

Result

Prøv å tømme errorMessage. aria-invalid fjernes automatisk.

Live Editor

<ix-field>
  <label>Kontonummer</label>
  <span data-field="description">11 siffer uten mellomrom</span>
  <div className="ix-text-field">
    <input className="ix-text-field__input" inputMode="numeric" />
  </div>
  <span data-field="error">Kontonummer må ha 11 siffer</span>
</ix-field>

Result

<ix-field> setter aria-invalid="true" automatisk når error-elementet har innhold. Tøm innholdet for å fjerne feiltilstanden:

const errorEl = document.querySelector('ix-field [data-field="error"]');
errorEl.textContent = 'Kontonummer må ha 11 siffer';
// → input får automatisk aria-invalid="true"

errorEl.textContent = '';
// → aria-invalid fjernes

Med prefix og suffix

Prefix og suffix gir ekstra kontekst om hva som skal fylles inn:

React
HTML

Live Editor

<>
  <TextField
    label="Beløp i kroner"
    prefix="kr"
    inputProps={{ inputMode: 'numeric' }}
  />
  <TextField
    label="Rente"
    suffix="%"
    inputProps={{ inputMode: 'decimal' }}
  />
</>

Result

Live Editor

<>
  <ix-field>
    <label>Beløp i kroner</label>
    <div className="ix-text-field">
      <div className="ix-text-field__prefix" aria-hidden="true">kr</div>
      <input className="ix-text-field__input" inputMode="numeric" />
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field>
    <label>Rente i prosent</label>
    <div className="ix-text-field">
      <input className="ix-text-field__input" inputMode="decimal" />
      <div className="ix-text-field__suffix" aria-hidden="true">%</div>
    </div>
    <span data-field="error"></span>
  </ix-field>
</>

Result

Prefix og suffix leses ikke opp av skjermlesere

Prefix og suffix er skjult med aria-hidden. Når konteksten ikke er åpenbar fra labelen, må du speile innholdet der. "Rente i prosent", ikke bare "Rente" med "%" som suffix.

Deaktivert og skrivebeskyttet

React
HTML

Live Editor

<>
  <TextField
    label="Kontonummer"
    disabled
    inputProps={{ value: '1234 56 78903' }}
  />
  <TextField
    label="Kontonummer"
    readOnly
    inputProps={{ value: '1234 56 78903' }}
  />
</>

Result

Live Editor

<>
  <ix-field class="ix-field--disabled">
    <label>Kontonummer</label>
    <div className="ix-text-field">
      <input className="ix-text-field__input" defaultValue="1234 56 78903" disabled />
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field class="ix-field--read-only">
    <label>Kontonummer</label>
    <div className="ix-text-field">
      <input className="ix-text-field__input" defaultValue="1234 56 78903" readOnly />
    </div>
    <span data-field="error"></span>
  </ix-field>
</>

Result

disabled gjør feltet helt inaktivt. Brukeren kan verken fokusere eller interagere med det. readOnly lar brukeren fokusere og kopiere verdien, men ikke endre den.

Retningslinjer

Tydelige labels gir forutsigbarhet

Alle TextField skal ha en synlig og beskrivende label. Labelen skal forklare hva brukeren skal skrive inn, ikke hva de skal gjøre. "E-postadresse" er bedre enn "Skriv inn e-post".

Når labelen beskriver selve dataen, kan brukeren raskt orientere seg uten å lese hele setninger. Dette er spesielt viktig i skjemaer med mange felter, der god struktur reduserer kognitiv belastning og risiko for feil.

Unngå bruk av placeholder

Placeholder anbefales ikke til viktig informasjon. Når brukeren begynner å skrive, forsvinner teksten og veiledningen går tapt. Bruk description i stedet, som alltid er synlig.

Hjelpetekst gir støtte der det trengs

Hjelpetekst brukes for å gi ekstra kontekst om krav til format eller innhold. Hold den kort, konkret og plassert nær feltet. God hjelpetekst kan redusere feil og behovet for feilmeldinger i etterkant.

Gjør dette

description="11 siffer uten mellomrom"

Ikke dette

description="Vennligst fyll inn kontonummeret ditt i det formatet som er korrekt for din kontotype"

Feilmeldinger skal hjelpe, ikke bare varsle

Feilmeldingen skal forklare hva som er feil og hvordan det rettes. Generelle meldinger som "Ugyldig verdi" gir liten verdi. Klare og konkrete tilbakemeldinger gjør det enklere å komme videre.

Felt	God feilmelding	Dårlig feilmelding
Kontonummer	"Kontonummer må ha 11 siffer"	"Ugyldig verdi"
E-post	"Oppgi en gyldig e-postadresse, f.eks. ola@sparebank1.no"	"Feil format"
Beløp	"Beløp må være mellom 1 og 500 000 kroner"	"Ugyldig beløp"

Komponenten har ingen innebygd validering. Feiltilstand styres utelukkende av innholdet i feilmeldingsfeltet. Sett errorMessage i React eller textContent på [data-field="error"] i HTML.

Ansvar	Hvem
Vise feilmelding og sette `aria-invalid`	Komponenten
Annonsere feilmelding til skjermleser	Komponenten
Bestemme når validering skjer	Du
Skrive hva feilmeldingen sier	Du

Validering bør ikke forstyrre

Valider når brukeren forlater feltet (blur) eller ved innsending, ikke mens de skriver. For tidlig validering kan oppleves som støy og avbryter flyten unødvendig.

Bredden på feltet påvirker forståelsen

Feltets bredde bør tilpasses det brukeren forventes å skrive. Smale felt signaliserer korte verdier som postnummer, bredere felt signaliserer lengre input som navn eller adresse. Variasjon i bredde gjør skjemaet lettere å skanne. Lik bredde på alle felt kan gjøre det vanskeligere å orientere seg.

Prefix og suffix må ikke stå alene

Prefix og suffix gir visuell kontekst, men leses ikke nødvendigvis opp av skjermlesere. Labelen må inneholde samme informasjon. Et felt med "kr" som prefix bør ha en label som "Beløp i kroner", ikke bare "Beløp".

Unngå type="number"

type="number" gir uforutsigbar oppførsel på tvers av nettlesere. Bruk inputMode="numeric" i stedet. Det gir talltastatur på mobil uten quirksene.

Universell utforming

Sist gjennomgått: 2026-04-07 — 56 av 56 WCAG 2.2-kriterier vurdert

Ditt ansvar

Disse tingene må teamet selv sørge for.

Skriv beskrivende labeltekst — WCAG 2.4.6, 3.3.2

Labelen skal forklare hva som skal fylles inn — ikke handlingen. "E-postadresse" er bedre enn "Skriv inn e-post". Alle felter må ha en label, selv om den er visuelt skjult med .ix-sr-only.

Skriv gode feilmeldinger — WCAG 3.3.1, 3.3.3

Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Kontonummer må ha 11 siffer" — ikke "Ugyldig verdi". Komponenten viser og annonserer meldingen, men du skriver innholdet.

Sett riktig autocomplete, type og inputMode — WCAG 1.3.5

Felter som ber om personlig informasjon må ha riktig autocomplete-verdi. Bruk type="email" for e-post, inputMode="numeric" for tall. Unngå type="number" — bruk inputMode="numeric" i stedet.

Speil prefix/suffix i labelteksten — WCAG 2.4.6, 2.5.3

Prefix og suffix er skjult fra skjermlesere med aria-hidden. Labelen må inneholde samme informasjon når konteksten ikke er åpenbar. Et felt med "%" som suffix bør ha label som "Rente i prosent", ikke bare "Rente".

Håndtert av komponenten (18 kriterier bestått)

Kriterium	Nivå	Hva komponenten gjør
1.1.1 Ikke-tekstlig innhold	A	Prefix og suffix settes aria-hidden="true" — rent visuelle elementer som ikke leses av skjermlesere.
1.3.1 Informasjon og relasjoner	A	Label kobles til input via for/id. Hjelpetekst og feilmelding kobles via aria-describedby.
1.3.2 Meningsfull rekkefølge	A	Label, input, hjelpetekst og feilmelding følger naturlig rekkefølge i DOM.
1.3.3 Sensoriske egenskaper	A	Feiltilstand bruker ikon, tekst og aria-invalid — ikke farge alene.
1.4.1 Bruk av farge	A	Feiltilstand kommuniseres med farge, ikon og tekstlig feilmelding.
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	Ramme og fokusindikator oppfyller 3:1 kontrastkrav.
1.4.12 Tekstavstand	AA	Tåler økt line-height, bokstav- og ordavstand uten tap av innhold.
1.4.13 Innhold ved hover eller fokus	AA	Hjelpetekst er persistent — forsvinner ikke ved fokusflytt.
2.1.1 Tastatur	A	Fullt opererbart med Tab og standard input-oppførsel.
2.1.2 Ingen tastaturfelle	A	Fokus kan navigeres ut med Tab og Shift+Tab.
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	Inputfeltet oppfyller minimum 24x24px klikkflate.
3.2.1 Ved fokus	A	Fokus trigger ingen kontekstendring.
3.2.2 Ved inndata	A	Input trigger ingen automatisk kontekstendring.
4.1.2 Navn, rolle, verdi	A	Native input med implisitt rolle. Tilgjengelig navn fra label. Tilstander eksponeres korrekt.

Ikke relevant for denne komponenten (31 kriterier)

Kriterium	Hvorfor ikke relevant
1.2.1 Bare lyd og bare video (forhåndsinnspilt)	Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)	Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)	Ingen medieelementer.
1.2.4 Teksting (direkte)	Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)	Ingen medieelementer.
1.3.4 Visningsretning	Ingen fast orientering — tilpasser seg visningsretning.
1.4.2 Styring av lyd	Ingen lydelementer.
1.4.5 Bilder av tekst	Ingen bilder av tekst.
2.1.4 Tastatursnarveier	Ingen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighet	Ingen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjul	Ingen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimt	Ingen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokker	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.2 Sidetitler	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)	Ingen lenker i komponenten.
2.4.5 Flere måter	Sidekrav — gjelder ikke enkeltkomponenter.
2.4.11 Fokus ikke skjult (minimum)	Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 Pekerbevegelser	Ingen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt peker	Native input-element — nettleseren håndterer pekerinteraksjon.
2.5.4 Bevegelsesaktivering	Ingen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismer	Ingen begrensning av input-type — native HTML-input.
2.5.7 Drabevegelser	Ingen drag-and-drop.
3.1.1 Språk på siden	Sidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innhold	Komponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.3 Konsistent navigasjon	Sidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjon	Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelp	Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)	Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføring	Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)	Ikke en autentiseringskomponent.
4.1.3 Statusmeldinger	Feilmeldinger håndteres via role="alert" og aria-live (dekket av 3.3.1). Ingen øvrige statusmeldinger.

Tastaturnavigasjon

Tast	Handling
`Tab`	Flytter fokus til inputfeltet
`Shift+Tab`	Flytter fokus til forrige fokuserbare element

Skjermleser

Ved fokus: "[label], tekstfelt"
Med hjelpetekst: "[label], tekstfelt, [hjelpetekst]"
Ved feil: "[label], ugyldig, tekstfelt, [feilmelding]"
Med skjult label: "[label], tekstfelt" — labelen leses opp selv om den ikke er synlig
Med prefix/suffix: prefix og suffix leses ikke opp — konteksten skal ligge i labelen

Hva komponenten gjør automatisk

Når du bruker <ix-field> eller React-komponenten, settes dette opp for deg:

for/id: Label kobles til input. Genererer en unik ID hvis input mangler en.
aria-describedby: Input peker til description og error-elementet. Rekkefølgen er meningsfull. Hjelpetekst leses før feilmelding.
aria-live="polite": Settes på error-elementet slik at skjermlesere annonserer nye feilmeldinger uten å avbryte brukeren.
aria-invalid: Synkroniseres automatisk med innholdet i error-elementet via MutationObserver.

Hva du selv må sørge for

Ditt ansvar

Meningsfull labeltekst — komponenten kobler label til input, men du må skrive god tekst
Gode feilmeldinger — komponenten viser dem og annonserer dem, men du skriver innholdet
Riktig autocomplete — sett autocomplete="name", autocomplete="email" osv. på felter som ber om personlig informasjon (WCAG 1.3.5)
Riktig type og inputMode — type="email" for e-post, inputMode="numeric" for tall. Gir riktig tastatur på mobil og bedre validering.
Prefix/suffix i label — prefix og suffix er skjult fra skjermlesere. Når konteksten ikke er åpenbar, må labelen inneholde samme informasjon: "Rente i prosent", ikke bare "Rente"

Props / API

React
HTML

TextFieldProps

Prop	Type	Påkrevd	Standard	Beskrivelse
`label`	`string`	Ja		Synlig labeltekst for feltet
`description`	`string`	Nei		Hjelpetekst som vises under label. Kobles til input via `aria-describedby`
`errorMessage`	`string`	Nei		Feilmelding som vises under input. Trigger `aria-invalid` når den har innhold
`prefix`	`ReactNode \| string`	Nei		Vises foran inputfeltet. Skjult fra skjermlesere med aria-hidden. Husk å speile innholdet i `label` når konteksten ikke er åpenbar
`suffix`	`ReactNode \| string`	Nei		Vises etter inputfeltet. Skjult fra skjermlesere med aria-hidden. Husk å speile innholdet i `label` når konteksten ikke er åpenbar
`placeholder`	`string`	Nei		Placeholder-tekst. Bør ikke brukes som bærer av viktig informasjon
`disabled`	`boolean`	Nei	`false`	Deaktiverer feltet helt. Ingen fokus eller interaksjon
`readOnly`	`boolean`	Nei	`false`	Brukeren kan fokusere og kopiere, men ikke endre verdien
`inputId`	`string`	Nei	Auto-generert	Eksplisitt ID for input-elementet. Brukes også for `label[for]`
`inputProps`	`InputHTMLAttributes`	Nei		Alle standard HTML input-attributter. Settes direkte på `<input>`
`className`	`string`	Nei		CSS-klasse på ytterste wrapper (`.ix-field`)

`<ix-field>` web component

<ix-field> har ingen egne attributter. Alt settes på native HTML-elementer inni. Strukturen under viser hvor hver del plasseres:

<ix-field>                                        ← wrapper, setter opp ARIA automatisk
  <label class="ix-label">Beløp i kroner</label>  ← kobles til input via for/id
  <span data-field="description">                  ← hjelpetekst, kobles via aria-describedby
    Maks 500 000 kroner
  </span>
  <div class="ix-text-field">                      ← container for input + prefix/suffix
    <div class="ix-text-field__prefix" aria-hidden="true">kr</div>    ← valgfri, speiles i label
    <input class="ix-text-field__input"            ← selve inputfeltet
      inputmode="numeric" />
    <div class="ix-text-field__suffix" aria-hidden="true">,00</div>   ← valgfri, speiles i label
  </div>
  <span data-field="error">                        ← alltid i DOM, tomt = ingen feil
    Beløp må være mellom 1 og 500 000
  </span>
</ix-field>

Del	Påkrevd	Beskrivelse
`<ix-field>`	Ja	Wrapper. Kobler ARIA mellom label, input, description og error automatisk
`<label class="ix-label">`	Ja	Labeltekst. Kobles til input via `for`/`id`. ID genereres om den mangler
`<span data-field="description">`	Nei	Hjelpetekst. Kobles til input via `aria-describedby`
`<div class="ix-text-field">`	Ja	Container for input med eventuell prefix/suffix
`<div class="ix-text-field__prefix" aria-hidden="true">`	Nei	Visuell prefix. Skjult fra skjermlesere. Husk å speile innholdet i label når konteksten ikke er åpenbar
`<input class="ix-text-field__input">`	Ja	Inputfeltet. Alle native attributter (`type`, `inputmode`, `name`, `disabled`, `readonly`) settes her
`<div class="ix-text-field__suffix" aria-hidden="true">`	Nei	Visuell suffix. Skjult fra skjermlesere. Husk å speile innholdet i label når konteksten ikke er åpenbar
`<span data-field="error">`	Ja	Feilmelding. Alltid i DOM. Tomt betyr ingen feil. Trigger `aria-invalid` automatisk

Tilstandsklasser

Settes på <ix-field> for å endre visuell tilstand:

Klasse	Beskrivelse
`.ix-field--disabled`	Deaktivert. Sett også `disabled` på input
`.ix-field--read-only`	Skrivebeskyttet. Sett også `readonly` på input

Live Editor

<>
  <ix-field class="ix-field--disabled">
    <label className="ix-label">Kontonummer</label>
    <div className="ix-text-field">
      <input className="ix-text-field__input" defaultValue="1234 56 78903" disabled />
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field class="ix-field--read-only">
    <label className="ix-label">Referanse</label>
    <div className="ix-text-field">
      <input className="ix-text-field__input" defaultValue="ORD-2026-0042" readOnly />
    </div>
    <span data-field="error"></span>
  </ix-field>
</>

Result

Relatert

Typografi — skriftstørrelser og fontvekter brukt i feltet
Spacing — avstandene mellom label, input og feilmelding
Farger — fargetokens for feil, fokus og disabled-tilstander
Deaktiverte tilstander — retningslinjer for når disabled er riktig valg

Egnet til​

Uegnet til​

Kom i gang​

Eksempler​

Med feilmelding​

Med prefix og suffix​

Deaktivert og skrivebeskyttet​

Retningslinjer​

Tydelige labels gir forutsigbarhet​

Unngå bruk av placeholder​

Hjelpetekst gir støtte der det trengs​

Feilmeldinger skal hjelpe, ikke bare varsle​

Validering bør ikke forstyrre​

Bredden på feltet påvirker forståelsen​

Prefix og suffix må ikke stå alene​

Universell utforming​

Ditt ansvar

Tastaturnavigasjon

Skjermleser

Hva komponenten gjør automatisk​

Hva du selv må sørge for​

Props / API​

TextFieldProps​

<ix-field> web component​

Tilstandsklasser​

Relatert​

Egnet til

Uegnet til

Kom i gang

Eksempler

Med feilmelding

Med prefix og suffix

Deaktivert og skrivebeskyttet

Retningslinjer

Tydelige labels gir forutsigbarhet

Unngå bruk av placeholder

Hjelpetekst gir støtte der det trengs

Feilmeldinger skal hjelpe, ikke bare varsle

Validering bør ikke forstyrre

Bredden på feltet påvirker forståelsen

Prefix og suffix må ikke stå alene

Universell utforming

Hva komponenten gjør automatisk

Hva du selv må sørge for

Props / API

TextFieldProps

`<ix-field>` web component

Tilstandsklasser

Relatert