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

Result

Loading...

Kode

Live Editor

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

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

Result

Loading...

Kode

Live Editor

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

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

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 quirksene.

Eksempler

Med feilmelding

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

Result

Loading...

Kode

Live Editor

<TextField
  label="Kontonummer"
  description="11 siffer uten mellomrom"
  errorMessage="Kontonummer må ha 11 siffer"
  inputMode="numeric"
/>

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

Result

Loading...

Kode

Live Editor

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

<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. prefix må ligge før <input>, suffix må ligge etter — feil rekkefølge gir feil visuell plassering.

Result

Loading...

Kode

Live Editor

<>
  <TextField
    label="Beløp i kroner"
    suffix="kr"
    inputMode="numeric"
  />
  <TextField
    label="Rente"
    suffix="%"
    inputMode="decimal"
  />
  <TextField
    label="Beløp i euro"
    prefix="€"
    suffix=",00"
    inputMode="numeric"
  />
</>

Result

Loading...

Kode

Live Editor

<>
  <ix-field>
    <label>Beløp i kroner</label>
    <div class="ix-text-field">
      <input inputMode="numeric" />
      <div data-field="suffix">kr</div>
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field>
    <label>Rente i prosent</label>
    <div class="ix-text-field">
      <input inputMode="decimal" />
      <div data-field="suffix">%</div>
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field>
    <label>Beløp i euro</label>
    <div class="ix-text-field">
      <div data-field="prefix">€</div>
      <input inputMode="numeric" />
      <div data-field="suffix">,00</div>
    </div>
    <span data-field="error"></span>
  </ix-field>
</>

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. €, $).

Deaktivert og skrivebeskyttet

Result

Loading...

Kode

Live Editor

<>
  <TextField
    label="Kontonummer"
    disabled
    defaultValue="1234 56 78903"
  />
  <TextField
    label="Kontonummer"
    readOnly
    defaultValue="1234 56 78903"
  />
</>

Result

Loading...

Kode

Live Editor

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

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.

Result

Loading...

Kode

Live Editor

<>
  <TextField
    label="E-postadresse"
    required
    type="email"
    autoComplete="email"
  />
  <TextField
    label="Mobilnummer (valgfritt)"
    type="tel"
    autoComplete="tel"
  />
</>

Result

Loading...

Kode

Live Editor

<>
  <ix-field>
    <label>E-postadresse</label>
    <div class="ix-text-field">
      <input type="email" autoComplete="email" required />
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field>
    <label>Mobilnummer (valgfritt)</label>
    <div class="ix-text-field">
      <input type="tel" autoComplete="tel" />
    </div>
    <span data-field="error"></span>
  </ix-field>
</>

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).

Result

Loading...

Kode

Live Editor

<>
  <TextField
    label="Kort beskrivelse"
    maxLength={50}
  />
  <TextField
    label="Begrunnelse"
    minLength={10}
  />
</>

Result

Loading...

Kode

Live Editor

<>
  <ix-field>
    <label>Kort beskrivelse</label>
    <div class="ix-text-field">
      <input maxlength="50" />
    </div>
    <span data-field="error"></span>
  </ix-field>
  <ix-field>
    <label>Begrunnelse</label>
    <div class="ix-text-field">
      <input minlength="10" />
    </div>
    <span data-field="error"></span>
  </ix-field>
</>

Tellerens ID inkluderes automatisk i aria-describedby slik at skjermlesere får det med.

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 forsvinner når brukeren begynner å skrive, kan forveksles med utfylt innhold, og er ikke tilstrekkelig erstatning for label eller description. Bruk description for eksempler og hint — det er alltid synlig.

description="11 siffer, f.eks. 1234 56 78903" er bedre enn placeholder="1234 56 78903".

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	Ikke dette
description="11 siffer uten mellomrom"	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".

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 — 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"

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.

Result

Loading...

Kode

Live Editor

<TextField ariaLabel="Søk" placeholder="Søk..." />

Result

Loading...

Kode

Live Editor

<ix-field>
  <div class="ix-text-field">
    <input aria-label="Søk" placeholder="Søk..." />
  </div>
  <span data-field="error"></span>
</ix-field>

WCAG-kriterier

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

WCAG-kriterier7 ditt ansvar · 18 håndtert · 31 ikke relevant · 0 ikke på plass

Ditt ansvar (7)

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".

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.
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 (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 — de sendes videre til <input>. maxLength/minLength aktiverer tegnteller automatisk.

<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>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 data-field="prefix">kr</div>                                 ← valgfri, speiles i label
    <input inputmode="numeric" />                      ← selve inputfeltet, styles via .ix-text-field > input
    <div data-field="suffix">,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>	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 data-field="prefix">	Nei	Visuell prefix. Skjules automatisk fra skjermlesere av <ix-field>. Husk å speile innholdet i label når konteksten ikke er åpenbar
<input>	Ja	Inputfeltet. Alle native attributter (type, inputmode, name, disabled, readonly) settes her
<div data-field="suffix">	Nei	Visuell suffix. Skjules automatisk fra skjermlesere av <ix-field>. 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

Tilstand via native attributter

Disabled og read-only styres kun via native attributter på input. ix-field håndterer visuell tilstand automatisk — ingen ekstra klasser trengs:

Result

Loading...

Kode

Live Editor

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

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

• 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