Hopp til innhold

TextInput

Vi bruker tekstfelt og tekstområder når vi vil at brukerne skal legge inn informasjon som tekst eller tall hvor vi ikke gir brukeren forhåndsvalg.

Tekstfelt: brukes for eksempel til navn, e-postadresser, fødselsnummer og andre typer informasjon som får plass på én linje.

Innholdet i tekstfelt kan være fritekst eller begrenses til et fast format, for eksempel fire siffer for postnummer eller at en e-postadresse må ha en alfakrøll og et toppdomene. Vi har en variant av tekstfelt kalt inline. Denne er til spesialtilfeller, hvis vi for eksempel trenger å plassere et tekstfelt i en setning.

Du finner et eksempel på tekstfelt brukt i skjemakontekst under Profil og Skjemadesign. Koden til eksempelet finner du på GitHub.

Tekstområder: brukes til fritekstfelter hvor det forventes å kunne komme mer enn én setning.

Vanligvis starter tekstområdet minimert og likner et vanlig tekstfelt. Når det får fokus vil feltet ekspandere. Du kan styre antall rader feltet skal ekspanderes til for å tilpasse til forventet lengde. Om innholdet blir lenger enn oppgitt antall rader vil feltet scrolle.

Du kan velge om feltet alltid skal ekspanderes til å vise alt innhold. Eventuell scrolling flyttes da til siden. Innhold under skjemafeltet vil dyttes nedover.

Dersom du har begrensninger på antall tegn kan du velge å vise en teller. Telleren vil ha en standard hjelpetekst om feltet går over grensen. Teksten kan overstyres. Det er ingen blokkering som hindrer brukeren å gå over grensen. Brukeren skal få fullføre tankerekken sin før hen redigerer teksten til å være innenfor grensen. Dersom feltet har en teller vises som standard en progress bar som krymper etter hvert som teksten blir lenger. Denne kan du velge å skru av og bare vise telleren.

Maskert input: Brukes til å håndtere lange tall som kan være vanskelige å lese.

Eksempler på tilfeller hvor en maskert input kan være nyttig er når brukeren skal skrive inn fødselsnummer, kortnummer, kontonummer eller andre lange tall. Dette gjør at tallene blir enklere å lese, og gjør det lettere for brukeren å være sikre på at de har skrevet inn riktig informasjon.

Les mer om formattering og maskering av input

Bruk

Før du velger et tekstfelt eller tekstområde kan det være greit å ha vurdert de andre skjemakomponentene vi har:

  • For datoer skal vi bruke Datepicker
  • Om vi har forhåndsdefinerte valg å gi brukeren er det flere alternativer
    • RadioButton for mellom to og fem valg
    • Select dersom vi har mange nok valg til at radioknapper ikke fungerer
    • Checkbox dersom det kan gjøres flere valg
    • Slider for tallverdier i et område, for eksempel fra 1 til 5
  • Om vi har forhåndsvalg, men også må kunne hente inn fritekst, se til Autosuggest

Det er noen faste regler som gjelder for både tekstfelt og tekstområder:

  • Hvert skjemafelt skal ha en ledetekst som forteller brukeren hva de skal oppgi av informasjon i feltet. Teksten kan skjules visuelt, men da må det være tydelig fra sammenhengen hva feltet gjelder (for eksempel et søk eller som en del av en setning).
  • Hvis skjemafeltet ikke validerer vises en feilmelding som forteller hva som er galt. Essensen i en eventuell hjelpetekst må komme fram også i feilmeldingen.
Du må fylle ut fødselsnummer, 11 siffer

Riktig

Hjelpetekst i feilmelding

Du må fylle ut fødselsnummer

Feil

Feilmelding uten hjelp

Det er også noen felles anbefalinger:

  • Placeholdertekst bør unngås. Den er ikke tilgjengelig for skjermlesere. Informasjonen forsvinner for brukeren og gjør seg sannsynligvis bedre som en ledetekst eller hjelpetekst.
  • Størrelsen på skjemafeltet bør passe til typen data brukerne skal legge inn, både i bredden (tekstfelt) og høyden (tekstområde).
  • Størrelsen på ledeteksten bør stå i forhold til innholdet rundt. Standard i et skjema er liten størrelse.
Fødselsnummer består av 11 siffer

Riktig

Informasjon i hjelpetekst

Feil

Hjelpetekst som forsvinner

Riktig

Bredde tilpasset innhold

Feil

Standardbredde selv hvor bredden er kjent

React API

Her finner du en oversikt over props på komponentene i pakken.