TextField

Egnet til:

• korte svar i form av tekst eller tall.
• utfyllende svar (se mer under «Slik bruker du komponenten»)
• situasjoner der det er enklere for brukeren å skrive informasjon fremfor å velge den på annet vis.

Uegnet til:

• formatert tekst, for eksempel markdown.

Teknisk dokumentasjon

Se TextField i Storybook for tekniske detaljer. 

Varianter

Størrelser

Komponenten kommer i to størrelsesvarianter:

• large brukes bare på eksterne flater. Komponenten får litt mer luft og tykkere ramme.
• medium kan brukes på både interne og eksterne flater.

Read-only

Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere tekst fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.

Slik bruker du komponenten

Vær generøs i hva du aksepterer av data. Godta input fra brukeren så lenge den er forståelig, for eksempel telefonnumre med mellomrom, kontonumre med punktum og e-postadresser med mellomrom til slutt.

Ledetekst, beskrivelse og hjelpetekst

Ledetekst og beskrivelse er alltid plassert over tekstfeltet slik at det er godt synlig på små skjermer og ikke kommer i konflikt med feilmelding. Unngå at ledeteksten går over flere linjer, men bruk i stedet beskrivelsesfeltet for å forklare detaljer. Hvis du har ytterligere behov for å veilede brukeren i utfyllingen kan du legge til en lengre hjelpetekst bak et spørsmålstegn. 

Ja

Nei

Ikke bruk placeholder-tekst

Vi fraråder bruk av placeholder-tekst. Grunnen til dette er at placeholder-teksten forsvinner så snart brukeren begynner å skrive i feltet, må informasjonen uansett gjentas i ledetekst eller beskrivelse. På grunn av kontrastkrav på minst 4,5, kan også brukerne tro at feltet allerede er utfylt. Sørg derfor for at du i stedet skriver den informasjon som trengs til utfylling av feltet i ledetekst og beskrivelse.

Nei

Autocomplete

Bruk autocomplete med aktuell verdi for felter med personlig informasjon som brukeren kan ha lagret for autoutfylling i nettleseren. For personlig innhold, for eksempel navn, adresse eller søk anbefaler vi å skru autocomplete på. For ikke-personlig innhold som for eksempel andre virksomheter, beløp, datoer og liknende anbefaler å skru autocomplete av, og dette er også standard oppførsel i tekstfeltet. Merk at de ulike nettleserne har varierende støtte for autocomplete.

Typer input

Bruk gjerne inputmode som tilsvarer informasjonstypen du ber om tel, search, email, og så videre. Disse tilbyr mobilbrukere et tastatur som er tilpasset inputtypen, men legg merke til at de kan også utløse validering av input i nettleseren (client-side validation).

Vis tegnbegrensning med teller

Du kan aktivere en teller som viser hvor mange tegn brukeren har skrevet i tekstfeltet. Telleren vises under feltet hele tiden når  characterLimit-prop'en er satt.

Hvis brukeren overskrider maks antall tegn endres utseendet og teksten på telleren for å signalisere at grensen er brutt. Dette er ment som en visuell tilbakemelding som hjelper brukeren å justere innholdet sitt. Tegnbegrensning fungerer ikke som validering, så du må i tillegg håndtere brukerutløste feil og obligatorske felt ved å vise vanlig feilmelding under feltet.

God praksis

• Skriveregler for ledetekster og hjelpetekster.
• Beste praksis for obligatoriske felt.

Universell utforming  

• Korte, tydelige og forståelige ledetekster er viktig. Hvis formatet er viktig, for eksempel. 9 siffer, bør dette vises i ledeteksten. Eksempel: Organisasjonsnummer (9 siffer).
• Kun placeholder-attributt er ikke tilstrekkelig for å bestå WCAG. Ledetekst (label/aria-label) og placeholder skal ikke være identiske. Placeholder-tekst er ment for å gi et hint om det som skal skrives i feltet.
• Feilmeldingen skal vises i umiddelbar nærhet til elementet den hører til. I Skatteetaten vises meldingen under tilhørende felt. Husk at kontrastkravet, minst 4,5 i kontrast for vanlig tekststørrelse, også gjelder på feilmeldinger (komponent oppfyller kravet som standard).