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, RadioGroup eller Checkbox.
Bruk
Prøv å endre label eller description direkte i editoren. Komponenten kobler for/id og aria-describedby automatisk.
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 quirksene.
Eksempler
Med tooltip
Bruk tooltip for å gi ekstra kontekst som ikke er kritisk for å fullføre oppgaven. Sett alltid tooltipLabel på riktig språk. Det er det tilgjengelige navnet på info-knappen.
Med feilmelding
Når valideringen feiler, vis en feilmelding som sier hva som er galt og hva brukeren skal gjøre:
Prøv å tømme errorMessage. aria-invalid fjernes automatisk.
Med prefix og suffix
Prefix og suffix gir ekstra kontekst om hva som skal fylles inn. prefix må ligge før <input>, suffix må ligge etter. Feil rekkefølge gir feil visuell plassering.
Norsk standard er beløp først, enhet etter: 1 500 kr. Bruk suffix="kr" for NOK, ikke prefix. prefix brukes for valutasymboler som plasseres foran beløpet (f.eks. €, $).
Formatering av verdien
TextField kan formatere innholdet automatisk. Sett format til en innebygd variant ("phone", "amount", "account", "orgnr", "ssn", "date"), eller bruk formatPattern for enkle mønstre. De innebygde variantene formaterer live: separatorene dukker opp mens brukeren skriver. Egne pattern-strenger og {format,parse}-objekter formateres på blur (viser rå verdi ved fokus) med mindre de setter live: true. Uansett vises alt brukeren skriver. Feil fanges av validering, ikke ved å droppe tegn.
Formatering er visuell. Den erstatter ikke behovet for å fortelle brukeren hva som forventes. Oppgi derfor forventet format som tekst i description (f.eks. "11 siffer, f.eks. 1234 56 78903"), slik eksemplene under gjør.
Skriv i feltene og se separatorene bygge seg opp mens du skriver. format="amount" gir tusenskille (1 234 567), og format="account" grupperer kontonummeret (1234 56 78903). Begge er live-varianter.
Verdien du leser av onChange er alltid den rå verdien uten separatorer (den ligger i en skjult mirror-input som også brukes ved form-innsending). Se Formatering for de to modusene, de tre måtene å definere en formatter på, egne varianter, og tilgjengelighetshensyn.
Deaktivert og skrivebeskyttet
disabled og readOnly settes direkte på input. ix-field tar seg av den visuelle tilstanden automatisk. disabled gjør feltet helt inaktivt: ingen fokus eller interaksjon. readOnly lar brukeren fokusere og kopiere, men ikke endre.
Valgfrie felt
I banksammenheng er nesten alle felter påkrevd. Merk unntaket, ikke regelen. Legg til (valgfritt) på slutten av labelteksten når et felt ikke er obligatorisk: label="Mobilnummer (valgfritt)". Ikke merk obligatoriske felt. Det er standarden.
Tegnteller
Sett maxlength eller minlength på input. ix-field oppretter og oppdaterer en tegnteller automatisk. Med maxlength vises 0/50, med minlength vises 0 tegn (minimum 10).
Tellerens ID inkluderes automatisk i aria-describedby slik at skjermlesere får det med.
Retningslinjer
Unngå bruk av placeholder
Placeholder forsvinner i det brukeren begynner å skrive, og et felt med grå tekst i kan
se ut som et felt som alt er fylt ut. Bruk description til eksempler og hint. Den står
der hele tiden.
description="11 siffer, f.eks. 1234 56 78903" er bedre enn placeholder="1234 56 78903".
Hold hjelpeteksten kort
Hjelpeteksten sier hva formatet er eller hva feltet skal inneholde. Ett kort avsnitt er nok, og det du sparer der slipper brukeren å lese.
| Gjør dette | Ikke dette |
|---|---|
description="11 siffer uten mellomrom" | description="Vennligst fyll inn kontonummeret ditt i det formatet som er korrekt for din kontotype" |
Si hva som er feil og hvordan det rettes
"Ugyldig verdi" forteller brukeren at noe er galt, ikke hva som skal til for å komme videre. Skriv hva kravet er.
| 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 validerer ingenting selv. Feiltilstanden følger 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 |
Valider på blur eller innsending
Ikke valider mens brukeren skriver. Et felt som slår ut i rødt etter tredje tegn i en e-postadresse har rett, men på feil tidspunkt.
Tilpass bredden til verdien
La bredden si noe om hvor lang verdien er: et smalt felt til postnummer, et bredt til adresse. Da kan brukeren skanne skjemaet uten å lese hver label, og et felt som ikke passer verdien blir et hint om at noe er feil.
Gjenta prefix og suffix i labelen
Prefix og suffix er visuell kontekst, og skjermlesere leser dem ikke nødvendigvis opp. Et felt med "kr" foran skal ha labelen "Beløp i kroner", ikke bare "Beløp".
Universell utforming
Hva du selv må sørge for
- 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: settautocomplete="name",autocomplete="email"osv. på felter som ber om personlig informasjon (WCAG 1.3.5) - Riktig
typeoginputMode.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"
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.required: Settes på input for nativ nettleservalidering. Ingen visuell indikator. Merk valgfrie felt med(valgfritt)i labelteksten.
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
Skjult label med ariaLabel
Synlig label er alltid anbefalt. I tilfeller der konteksten er helt åpenbar fra omgivelsene (f.eks. et søkefelt i en søkebar), kan ariaLabel brukes i stedet. Bruk det kun når synlig label er umulig av layoutmessige grunner. Skjult label gjør det vanskeligere for alle brukere å orientere seg i skjemaet.
Eksempelet under bruker placeholder som visuelt hint. Det er unntaket fra rådet over: uten label står feltet ellers helt uten tekst. Har feltet synlig label, bruker du description.
WCAG-kriterier
Sist gjennomgått: 2026-07-14 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier9 ditt ansvar · 18 håndtert · 31 ikke relevant · 0 ikke på plass
Ditt ansvar (9)
| 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". Alle felter må ha en label, selv om den er visuelt skjult med .ix-sr-only. |
| 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". Alle felter må ha en label, selv om den er visuelt skjult med .ix-sr-only. |
| 3.3.1 Identifikasjon av feil | A | Skriv gode feilmeldinger. 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. |
| 3.3.3 Forslag ved feil | AA | Skriv gode feilmeldinger. 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. |
| 1.3.5 Identifiser formål med inndata | AA | Sett riktig autocomplete, type og inputMode. 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. |
| 2.4.6 Overskrifter og ledetekster | AA | Speil prefix/suffix i labelteksten. 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". |
| 2.5.3 Label i navn | A | Speil prefix/suffix i labelteksten. 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". |
| 3.3.1 Identifikasjon av feil | A | Oppgi forventet format som tekst når du bruker formatering. Bruker du format eller formatPattern, må forventet format stå som synlig tekst i description (f.eks. "11 siffer"), ikke bare demonstreres av formateringen. Bruk aldri type="number" med formatering (gir tom .value) — bruk type="text"/"tel" med inputMode. Formatering er visuell, ikke validering: feltet avviser aldri tastetrykk, så valider på blur/innsending med en egen errorMessage. |
| 3.3.2 Ledetekster eller instruksjoner | A | Oppgi forventet format som tekst når du bruker formatering. Bruker du format eller formatPattern, må forventet format stå som synlig tekst i description (f.eks. "11 siffer"), ikke bare demonstreres av formateringen. Bruk aldri type="number" med formatering (gir tom .value) — bruk type="text"/"tel" med inputMode. Formatering er visuell, ikke validering: feltet avviser aldri tastetrykk, så valider på blur/innsending med en egen errorMessage. |
Håndtert av komponenten (18)
| 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 tekst, farge og aria-invalid — ikke farge alene. |
| 1.4.1 Bruk av farge | A | Feiltilstand kommuniseres med farge, rammeendring 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. I blur-modus vises rå verdi ved fokus; i live-modus reformateres verdien mens brukeren skriver, men markøren styres eksplisitt så den holder plassen. |
| 3.2.2 Ved inndata | A | Input trigger ingen automatisk kontekstendring. De innebygde variantene formaterer live (per tastetrykk) med eksplisitt markørstyring, mens egne formattere er blur med mindre live settes. Formatering masker ikke — den avviser aldri tastetrykk, og bytter aldri fokus eller side. |
| 4.1.2 Navn, rolle, verdi | A | Native input med implisitt rolle. Tilgjengelig navn fra label. Tilstander eksponeres korrekt. |
Ikke relevant (31)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 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.4 Visningsretning | AA | Ingen fast orientering — tilpasser seg visningsretning. |
| 1.4.2 Styring av lyd | A | Ingen lydelementer. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 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.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.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 | Native input-element — nettleseren håndterer pekerinteraksjon. |
| 2.5.4 Bevegelsesaktivering | A | Ingen bevegelsesbasert interaksjon. |
| 2.5.6 Samtidige inndatamekanismer | A | Ingen begrensning av input-type — native HTML-input. |
| 2.5.7 Drabevegelser | A | Ingen drag-and-drop. |
| 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.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.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 | Feilmeldinger håndteres via aria-live="polite" (dekket av 3.3.1). Ingen øvrige statusmeldinger. |
Props / API
TextFieldProps
| Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
label | string | Nei* | Synlig labeltekst for feltet. Anbefalt fremfor ariaLabel | |
ariaLabel | string | Nei* | Skjult label for skjermlesere. Brukes kun når synlig label ikke er mulig. *Enten label eller ariaLabel må settes | |
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 | |
className | string | Nei | CSS-klasse på ytterste wrapper (.ix-field) | |
ref | Ref<HTMLInputElement> | Nei | Ref videresendes til <input>-elementet. Nyttig for fokusstyring og validering |
I tillegg støttes alle standard HTML input-attributter (value, defaultValue, onChange, onBlur, type, placeholder, disabled, readOnly, required, id, name, autoComplete, inputMode, pattern, maxLength, minLength osv.) som settes direkte på komponenten og sendes videre til <input>. maxLength/minLength aktiverer tegnteller automatisk.
Tilpasning med CSS
Trenger du ix-text-field-stylingen på HTML du setter sammen selv, uten
React-komponenten eller <ix-field>, kan du bruke klassene direkte på elementene dine.
Tilgjengelige klasser og selektorer
| Element | Selektor |
|---|---|
| Input-wrapper | .ix-text-field |
| Inputfelt | .ix-text-field > input eller .ix-text-field__input |
| Prefix | .ix-text-field > [data-field="prefix"] |
| Suffix | .ix-text-field > [data-field="suffix"] |
| Label | .ix-label |
| Hjelpetekst | [data-field="description"] |
| Feilmelding | [data-field="error"] |
.ix-text-field__input gir inputfeltet nøyaktig samme stilregler som
.ix-text-field > input. Bruk den når du ikke kan eller vil bruke komponentens
HTML-struktur.
Eksempel: bruk i egen HTML-struktur
<ix-field>
<label>Kontonummer</label>
<span data-field="description">11 siffer uten mellomrom</span>
<div class="ix-text-field">
<input class="ix-text-field__input" type="text" inputmode="numeric" name="kontonummer" />
</div>
<span data-field="error"></span>
</ix-field>
Hva ix-field gjør med DOM-en
<ix-field> er en web component som setter opp ARIA-koblinger automatisk når den kobles til DOM. Her er hva som skjer, fra HTML du skriver til HTML etter at ix-field har kjørt.
Før (det du skriver):
<ix-field>
<label>Beløp i kroner</label>
<span data-field="description">Maks 500 000 kroner</span>
<div class="ix-text-field">
<div data-field="prefix">kr</div>
<input inputmode="numeric" />
</div>
<span data-field="error"></span>
</ix-field>
Etter (det som er i DOM etter at ix-field har kjørt):
<ix-field>
<label for="ix-field-1">Beløp i kroner</label>
<span data-field="description" id="ix-field-1-description">Maks 500 000 kroner</span>
<div class="ix-text-field" data-has-prefix>
<div data-field="prefix" aria-hidden="true">kr</div>
<input inputmode="numeric" id="ix-field-1"
aria-describedby="ix-field-1-description ix-field-1-error" />
</div>
<span data-field="error" id="ix-field-1-error" aria-live="polite"></span>
</ix-field>
Hva som ble lagt til:
| Hva | Hvor | Hvorfor |
|---|---|---|
for="ix-field-1" | <label> | Kobler label til input — klikk på label gir fokus til feltet |
id="ix-field-1" | <input> | Grunnlag for alle ARIA-koblinger. Genereres bare om input mangler en ID |
id="ix-field-1-description" | description-span | Nødvendig for aria-describedby-kobling |
id="ix-field-1-error" | error-span | Nødvendig for aria-describedby-kobling |
aria-describedby="... ..." | <input> | Skjermleseren leser description og feilmelding etter label og verdi |
aria-live="polite" | error-span | Skjermleseren annonserer feilmeldinger automatisk når de dukker opp |
aria-hidden="true" | prefix-div | Prefix er visuell kontekst — skal ikke leses opp separat |
data-has-prefix | .ix-text-field | Signaliserer til CSS at input-feltet skal miste venstre radius |
Når error-span får innhold setter ix-field i tillegg aria-invalid="true" på input automatisk via MutationObserver. Når den tømmes fjernes attributten igjen.
Relatert
- Label — reglene for labeltekst, felles for alle skjemafelt
- 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