Uansett valg deler vi aldri dine data med andre. Mer om informasjonskapsler på aksel.nav.no

  • Godta alle: Hjelper oss gjøre tjenestene bedre for deg basert på anonymisert bruk.
  • Bare nødvendige: Sikrer at tjenesten fungerer og er trygg. Kan ikke velges bort.
Hopp til innhold
Aksel

Søk

Ctrl+K for å søkeEsc for å lukke

Aksel

Designsystemet
God praksisBloggen

Komponenter

TextField

TextField er et klassisk input-element som gir brukere muligheten til å skrive korte tekster eller tall.

StabilOppdatert 30. april 2025

Egnet til:

  • Korte tekster / svar
  • Tall

Uegnet til:

  • Mer utfyllende og lengre svar
  • Formatert data, eksempelvis markdown

Eksempler

Sandbox
Åpne eksempel i nytt vindu
TSX
<TextField label="Har du noen tilbakemeldinger?" />

Skjule label visuelt

TextField skal alltid ha en label. I spesielle tilfeller kan label skjules visuelt med propen hideLabel, f.eks. i tabeller der feltet får ledeteksten sin fra tabellheaderen. Selv om labelen skjules er det viktig at den er meningsfull siden den fortsatt leses av skjermlesere.

Retningslinjer

Plassering av label og description

Label og description er alltid plassert over tekstfeltet slik at det er godt synlig på små skjermer og ikke kommer i konflikt med feilmelding.

Gjør
Eksempel på bruk av label og description. Label: \"Din månedslønn før skatt\" Description: \"Inntekt i norske kroner\"
Bruk description i tillegg til label når det er behov for mer utfyllende forklaring.
Unngå
Eksempel på labeltekst som går over to linjer
Unngå labeltekst som går over to linjer.

Ikke bruk placeholder-tekst

Vi fraråder bruk av placeholder-tekst. Denne teksten forsvinner når det skrives i feltet. Derfor må informasjonen uansett gjentas i label eller beskrivelse. Kontrastkravene i WCAG gjelder for placeholder, og da blir teksten så mørk at det er lett å tro at feltet er utfylt.

Gjør
Textfield med label \"Din månedslønn før skatt\" og description \"Inntekt i norske kroner\".
Bruk label og description for å beskrive hva som skal skrives inn i tekstfeltet.
Unngå
TextField med placeholder-tekst
Ikke bruk placeholder-tekst.

Tilpass bredden på tekstfeltet

Tekstfelt bør ha en bredde som er tilpasset det brukeren skal skrive inn. Når tekstfeltene har forskjellig bredde blir det lettere å navigere i skjemaer med mange felter.

Gjør
Et inputfelt med størrelse tilpasset innholdet
Tilpass størrelsen til inputfeltet til innholdet.
Unngå
Alle feltene med samme bredde
Ikke ha samme bredde på alle feltene uavhengig av forventet input.

Input og formatering

  • Bruk autoComplete for felter som mottar personlig informasjon. For felter som etterspør personlig informasjon om en annen person enn brukeren, skru autocomplete av. (WCAG 1.3.5)
  • Bruk gjerne inputtyper som tilsvarer informasjonstypen du ber om (tel, search, email, osv.). Disse tilbyr mobilbrukere et tastatur som er tilpasset inputtypen, men ta i betraktning at de også kan utløse klientsidevalidering. Se også inputMode.
  • Vær generøs i hva du aksepterer av data. Godta input fra brukeren så lenge den er forståelig, f.eks. telefonnumre med mellomrom, personnumre med punktum, e-postadresser med mellomrom til slutt.
  • Dersom input blir automatisk formatert, bør dette gjøres på en måte som ikke forstyrrer utfyllingen. Samtidig bør formateringen blir synlig for brukeren slik at de kan kontrollere om det ble riktig.
  • Unngå bruk av all-caps og kursiv tekst i label. Disse er vanskeligere å lese.

Number-input

Det kan være fristende å slenge på en type="number", men dette medfører en del problemer man kan lese mer om i denne bloggposten (stackoverflow.blog). En enkel løsning hvis man bare trenger heltall er å bruke inputMode="numeric", som gir talltastatur på mobil:

HTML
type="text" inputMode="numeric"

Hvis du trenger muligheten til å ta imot desimaler, kan du bruke inputMode="decimal".

Tilgjengelighet

Disabled

Vi fraråder bruk av disabled state. Vurder om du trenger å vise feltet i det hele tatt, om du heller kan bruke readOnly, eller bare kan skrive ut informasjonen i ren tekst.

Prefix/suffix

Fra et uu-perspektiv anbefaler vi å unngå prefix eller suffix i forbindelse med inputfelter. Dette kan føre til problemer for folk som bruker autofill-verktøy, skjermlesere og skjermforstørrere. Dessuten kan slik informasjon inn i feltet føre til at folk opplever feltet som allerede fylt ut. Bruk heller en label som forklarer hva innholdet i feltet skal være inkludert enhet, uten forkortelser.

Props

TextField

value?

  • Type:
    string | number
  • Description:

    Controlled value

defaultValue?

  • Type:
    string | number
  • Description:

    Defaults input-value without needing controlled-state

htmlSize?

  • Type:
    number
  • Description:

    Exposes the HTML size attribute

hideLabel?

  • Type:
    boolean
  • Description:

    If enabled shows the label and description for screenreaders only

label

  • Type:
    ReactNode
  • Description:

    TextField label

type?

  • Type:
    "number" | "email" | "password" | "tel" | "text" | "url" | "time"
  • Default:
    ""text""
  • Description:

    Type of form control. Picking the correct type helps user fill inn their required information

error?

  • Type:
    ReactNode
  • Description:

    Error message.

errorId?

  • Type:
    string
  • Description:

    Override internal errorId.

size?

  • Type:
    "medium" | "small"
  • Default:
    "null"
  • Description:

    Changes font-size, padding and gaps.

disabled?

  • Type:
    boolean
  • Description:

    Avoid using if possible for accessibility purposes.

    Disables element.

description?

  • Type:
    ReactNode
  • Description:

    Adds a description to extend the labeling.

id?

  • Type:
    string
  • Description:

    Override internal id.

readOnly?

  • Type:
    boolean
  • Description:

    Read-only state.

className?

  • Type:
    string

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

    Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref). React Docs

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Mer dokumentasjon for dette kommer, midlertidig dokumentasjon finner du her.

TokenFallback
--ac-textfield-bg--a-surface-default
--ac-textfield-border--a-border-default
--ac-textfield-text--a-text-default
--ac-textfield-placeholder--a-text-subtle
--ac-textfield-hover-border--a-border-action-hover
--ac-textfield-active-border--a-border-action-selected
--ac-textfield-error-border--a-border-danger