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 class="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 class="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' }}
  />
  <TextField
    label="Beløp i euro"
    prefix="€"
    suffix=",00"
    inputProps={{ inputMode: 'numeric' }}
  />
</>

Result

Live Editor

<>
  <ix-field>
    <label>Beløp i kroner</label>
    <div class="ix-text-field">
      <div data-field="prefix">kr</div>
      <input inputMode="numeric" />
    </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>
</>

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>
    <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>
</>

Result

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) i labelteksten når et felt ikke er obligatorisk.

React
HTML

Live Editor

<>
  <TextField
    label="E-postadresse"
    required
    inputProps={{ type: 'email', autoComplete: 'email' }}
  />
  <TextField
    label="Mobilnummer (valgfritt)"
    inputProps={{ type: 'tel', autoComplete: 'tel' }}
  />
</>

Result

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>
</>

Result

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

React
HTML

Live Editor

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

Result

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>
</>

Result

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 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 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 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 aria-live="polite" (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.
required: Settes på input for nativ nettleservalidering. Ingen visuell indikator — merk valgfrie felt med (valgfritt) i labelteksten.

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 synlig label

Skjult label gjør det vanskeligere for alle brukere å orientere seg i skjemaet. Bruk ariaLabel kun når synlig label er umulig av layoutmessige grunner, og teksten er meningsfull for skjermleserbrukere.

React
HTML

Live Editor

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

Result

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>

Result

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`	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
`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
`required`	`boolean`	Nei	`false`	Setter `required` på input for nativ nettleservalidering
`ref`	`Ref<HTMLInputElement>`	Nei		Ref videresendes til `<input>`-elementet. Nyttig for fokusstyring og validering
`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>`. Bruk `inputProps={{ name: 'feltnavn' }}` for nativ skjema-innsending. `maxLength`/`minLength` aktiverer tegnteller automatisk
`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>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:

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>
</>

Result

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

Egnet til​

Uegnet til​

Kom i gang​

Eksempler​

Med feilmelding​

Med prefix og suffix​

Deaktivert og skrivebeskyttet​

Valgfrie felt​

Tegnteller​

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​

Skjult label med ariaLabel​

Hva du selv må sørge for​

Props / API​

TextFieldProps​

<ix-field> web component​

Tilstand via native attributter​

Tilpasning med CSS​

Tilgjengelige klasser og selektorer​

Eksempel: bruk i egen HTML-struktur​

Hva ix-field gjør med DOM-en​

Relatert​

Egnet til

Uegnet til

Kom i gang

Eksempler

Med feilmelding

Med prefix og suffix

Deaktivert og skrivebeskyttet

Valgfrie felt

Tegnteller

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

Skjult label med ariaLabel

Hva du selv må sørge for

Props / API

TextFieldProps

`<ix-field>` web component

Tilstand via native attributter

Tilpasning med CSS

Tilgjengelige klasser og selektorer

Eksempel: bruk i egen HTML-struktur

Hva ix-field gjør med DOM-en

Relatert