# TextField

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

## Egnet til[​](#egnet-til "Direct link to Egnet til")

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

## Uegnet til[​](#uegnet-til "Direct link to 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[​](#kom-i-gang "Direct link to Kom i gang")

* React
* HTML

Live Editor

Reset

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

Result

Loading...

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

Live Editor

Reset

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

Loading...

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

## Eksempler[​](#eksempler "Direct link to 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[​](#med-feilmelding "Direct link to 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

Reset

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

Result

Loading...

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

Live Editor

Reset

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

Loading...

`<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[​](#med-prefix-og-suffix "Direct link to Med prefix og suffix")

Rekkefølge i DOM er avgjørende

`prefix` må ligge før `<input>`, `suffix` må ligge etter. Feil rekkefølge gir feil visuell plassering.

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

* React
* HTML

Live Editor

Reset

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

Result

Loading...

Norsk valutakonvensjon

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

Live Editor

Reset

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

Result

Loading...

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[​](#deaktivert-og-skrivebeskyttet "Direct link to Deaktivert og skrivebeskyttet")

* React
* HTML

Live Editor

Reset

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

Result

Loading...

Live Editor

Reset

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

Loading...

`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[​](#valgfrie-felt "Direct link to 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.

* React
* HTML

Live Editor

Reset

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

Result

Loading...

Live Editor

Reset

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

Loading...

### Tegnteller[​](#tegnteller "Direct link to 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

Reset

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

Result

Loading...

Live Editor

Reset

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

Loading...

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

## Retningslinjer[​](#retningslinjer "Direct link to Retningslinjer")

### Tydelige labels gir forutsigbarhet[​](#tydelige-labels-gir-forutsigbarhet "Direct link to 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[​](#unngå-bruk-av-placeholder "Direct link to Unngå bruk av placeholder")

Unngå 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-gir-støtte-der-det-trengs "Direct link to 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[​](#feilmeldinger-skal-hjelpe-ikke-bare-varsle "Direct link to 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[​](#validering-bør-ikke-forstyrre "Direct link to 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[​](#bredden-på-feltet-påvirker-forståelsen "Direct link to 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-må-ikke-stå-alene "Direct link to 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[​](#universell-utforming "Direct link to 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[​](#hva-komponenten-gjør-automatisk "Direct link to 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[​](#skjult-label-med-arialabel "Direct link to 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

Reset

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

Result

Loading...

Live Editor

Reset

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

Result

Loading...

### Hva du selv må sørge for[​](#hva-du-selv-må-sørge-for "Direct link to 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[​](#props--api "Direct link to Props / API")

* React
* HTML

### TextFieldProps[​](#textfieldprops "Direct link to 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-web-component "Direct link to 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[​](#tilstand-via-native-attributter "Direct link to 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

Reset

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

Loading...

## Tilpasning med CSS[​](#tilpasning-med-css "Direct link to 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[​](#tilgjengelige-klasser-og-selektorer "Direct link to 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[​](#eksempel-bruk-i-egen-html-struktur "Direct link to 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[​](#hva-ix-field-gjør-med-dom-en "Direct link to 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[​](#relatert "Direct link to Relatert")

* [Typografi](/docs/grunnleggende/typografi.md) — skriftstørrelser og fontvekter brukt i feltet
* [Spacing](/docs/grunnleggende/tokens/spacing.md) — avstandene mellom label, input og feilmelding
* [Farger](/docs/retningslinjer/farger/.md) — fargetokens for feil, fokus og disabled-tilstander
* [Deaktiverte tilstander](/docs/monstre-og-maler/deaktiverte-tilstander.md) — retningslinjer for når disabled er riktig valg