Aksel

Meny

Komponenter / Core

TextField

Oppdatert Stabil
GithubYarn FigmaEndringslogg

Intro

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

Egnet til:

  • Korte tekster / svar
  • Tall

Uegnet til:

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

Har du innspill til komponenten?

Send forslag

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

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ørEksempel 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ørTextfield 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ørEt 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:

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

Relevante lenker

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:

defaultValue?

  • Type:
    string | number
  • Description:

htmlSize?

  • Type:
    number
  • Description:

hideLabel?

  • Type:
    boolean
  • Description:

label

  • Type:
    ReactNode
  • Description:

type?

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

error?

  • Type:
    ReactNode
  • Description:

errorId?

  • Type:
    string
  • Description:

size?

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

disabled?

  • Type:
    boolean
  • Description:

description?

  • Type:
    ReactNode
  • Description:

id?

  • Type:
    string
  • Description:

readOnly?

  • Type:
    boolean
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLInputElement>
  • Description:

Tokens

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
Hva er dette?

Komponent-tokens gir deg muligheten til å sette opp theming eller justere styling uten å måtte overskrive css-klasser. Les gjennom guiden vår eller utforsk alle design tokens.