Tilbake til forsidenDesignsystemet

TextField@navikt/ds-react

betaOppdatert 15. juni 2022
YarnKode

Installasjon

Setup

aksel.nav.no

Retningslinjer

  • 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 kan også utløse client-side validering av feltets input.
  • 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, epost-adresser med mellomrom til slutt.
  • Dersom input blir automatisk formattert, må dette være synlig for brukere slik at de kan kontrollere om det ble riktig.
  • Feltets name må inkludere, og helst starte med teksten i dens label. (WCAG 2.5.3)
  • Unngå bruk av all-caps og kursiv tekst til labels. Disse er vanskeligere å lese.

Props

TextField
value
Type
string
DescriptionControlled value
defaultValue
Type
string
DescriptionDefaults input-value without needing controlled-state
htmlSize
Type
number
DescriptionExposes the HTML size attribute
hideLabel
Type
boolean
DescriptionIf enabled shows the label and description for screenreaders only

Required

label
Type
ReactNode
DescriptionTextField label
type
Type
"number" | "email" | "password" | "tel" | "text" | "url"
DescriptionType of form control. Picking the correct type helps user fill inn their required information
Default"text"
error
Type
ReactNode
DescriptionError message for element
errorId
Type
string
DescriptionOverride internal errorId
size
Type
"medium" | "small"
DescriptionChanges font-size, padding and gaps
disabled
Type
boolean
DescriptionDisables element @note Avoid using if possible for accessibility purposes
description
Type
ReactNode
DescriptionAdds a description to extend labling of a field
id
Type
string
DescriptionOverride internal id
className
Type
string
ref
Type
Ref<HTMLInputElement>

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Var denne artikkelen til hjelp?