Textarea

Release dato: 11.09.2023

Sist oppdatert: 07.07.2025

Textarea (fritekstfelt) er et skjemaelement som lar brukeren skrive tekst over flere linjer. Bruk det nÄr du forventer at brukeren skal skrive inn lengre tekst, som fritekstsvar eller beskrivelser.

For korte svar anbefaler vi text input.

Test komponenten

Relaterte komponenter

Varianter

VariantBeskrivelse
DefaultEnkelt felt for lengre tekst
Med tellerNÄr du har en maksgrense pÄ antall tegn

States

StateBeskrivelse
DefaultFeltet vises i normal tilstand, klar til bruk
HoverNĂ„r brukeren beveger musepekeren over feltet
FocusNĂ„r brukeren har markert feltet og er klar til Ă„ skrive
ActiveNĂ„r brukeren skriver i feltet
ErrorNĂ„r feltet har en feil, og en forklarende feilmelding vises
DisabledNĂ„r feltet ikke er tilgjengelig for interaksjon

Retningslinjer for bruk

Bruk textarea nÄr

  • brukeren skal skrive lengre fritekstsvar
  • svaret ikke har en fast struktur

UnngÄ textarea nÄr

Plassholder

Du kan legge til plassholdertekst, men ikke bruk den som eneste instruksjon. Plassholderen forsvinner nÄr brukeren skriver, og er ikke alltid tilgjengelig for skjermlesere.

GjĂžr slik

Gjþr slik – eksempel med tydelig etikett og hjelpetekst
Bruk label for Ă„ forklare feltet, og bruk plassholder kun som stĂžtte

UnngÄ

UnngĂ„ – eksempel hvor plassholder brukes som eneste instruksjon
UnngÄ bruk av plassholder som eneste instruksjon

StĂžrrelse

Textarea skal ha en hÞyde som stÄr i forhold til hvor mye tekst du forventer at brukeren skriver. For smÄ felt gjÞr det vanskelig Ä lese og redigere lengre svar.

GjĂžr slik

Gjþr slik – hensiktsmessig hþyde for lengre svar
Tilpass hÞyden pÄ textarea etter mengden tekst du forventer

UnngÄ

UnngĂ„ – for liten hĂžyde som gjĂžr lesing/redigering vanskelig
UnngÄ Ä gjÞre feltet for lite, da blir det vanskelig Ä lese og redigere tekst

Teller (counter)

Hvis du har en tegnbegrensning, kan du legge til en teller. Den hjelper brukeren med Ă„ holde seg innenfor grensen uten Ă„ stoppe skrivingen.

Brukeren mÄ fÄ lov til Ä fullfÞre tanken sin selv om grensen overskrides. Derfor skal feltet kunne inneholde mer tekst enn maksgrensen, men samtidig vise at grensen er passert (content overflow).

Responsivitet

Textarea tilpasser seg bredden pÄ skjermen og bryter linjer automatisk. Test pÄ mobil, nettbrett og desktop for Ä sikre at feltet er lett Ä bruke og lese overalt.

Universell utforming

Ledetekst og instruksjon

Alle skjemaelementer mÄ ha en label eller instruksjon som forklarer hvordan feltet skal fylles ut, inkludert om det er obligatorisk eller valgfritt. Labelen mÄ vÊre koblet til feltet i koden slik at skjermlesere kan lese opp riktig informasjon. I mer komplekse skjemaer kan du trenge ekstra forklaring gjennom hjelpetekst eller ekspanderende hjelpetekst.

Feilmeldinger

Feilmeldinger mÄ vÊre tilgjengelige bÄde for skjermlesere og for de som navigerer med tastatur. Det skal vÊre enkelt Ä identifisere hvilket felt feilen gjelder, og meldingen bÞr beskrive bÄde hva som er galt og hvordan brukeren kan rette opp.

Spesielt for textarea

  • Feltet mĂ„ kunne ekspanderes slik at lange svar blir hĂ„ndterbar
  • Telleren mĂ„ ikke blokkere innskriving, men tydelig vise nĂ„r maksgrensen er passert (content overflow)
  • Test at feltet fungerer godt med zoom og pĂ„ smĂ„ skjermer

Anatomi

ElementBeskrivelse
Label (etikett)Kort og tydelig ledetekst som beskriver hva brukeren skal velge
Valgfritt-/obligatoriskMerker feltet som valgfritt eller obligatorisk
HjelpetekstKort forklaring under label som hjelper brukeren Ä forstÄ hvordan de skal fylle ut feltet
Ekspanderende hjelpetekst“Les mer”-knapp som viser mer utfyllende informasjon nĂ„r brukeren trenger ekstra forklaring
InputfeltSelve tekstfeltet der brukeren skriver inn
PlassholdertekstMidlertidig tekst i feltet som indikerer at brukeren mÄ gjÞre et valg, skal ikke erstatte label
TellerViser hvor mange tegn brukeren har skrevet, og maksgrensen (valgfritt)

Implementasjon i kode

Hvordan ta komponenten i bruk?

Testing

Elements: Dersom du skal skrive tester med JSDOM eller liknende er det viktig at du lar komponenten bli rendret ferdig fĂžr du tester den. Dette kan gjĂžres ved Ă„ kjĂžre denne kodelinjen fĂžr testene kjĂžres: 

await window.customElements.whenDefined("pkt-textarea");

Props og tokens

PropTypeBeskrivelse
labelstringTekst som vises over feltet
namestringNavn som sendes brukes i skjema ved innsending
placeholderstringSpesifiserer en kort hint som beskriver forventet verdi av feltet.
helptextstringHjelpetekst som vises over feltet
helptextDropdownstringHjelpetekst som vises i en lukket boks man kan Ă„pne
helptextDropdownButtonstringTekst som vises pÄ knappen for Ä Äpne/lukke utvidet hjelpetekst
rowsnumberSpesifiserer antall synlige rader i feltet.
valuestringSpesifiserer den nÄvÊrende verdien av feltet.
autocompletestringSpesifiserer hvordan type `autocomplete` feltet har. Standard er 'off'.
ariaLabelledbystringSpesifiserer ID-en til elementet som beskriver feltet.
requiredbooleanEr feltet pÄkrevd?
requiredTagbooleanIndikerer om feltet er pÄkrevd.
requiredTextstringTekst som vises i pÄkrevd-merkingen
optionalTagbooleanIndikerer om feltet er valgfritt.
optionalTextstringTekst som vises i valgfritt-merkingen
tagTextstringTekst som vises i en tag ved siden av label
hasErrorbooleanIndikerer om feltet har en feil.
errorMessagestringTekst som vises under datovelgeren ved feiltilstand
disabledbooleanIndikerer om feltet er deaktivert.
inlinebooleanIndikerer om feltet skal vises inline.
fullwidthbooleanIndikerer om feltet skal ta opp full bredde.
useWrapperbooleanIndikerer at feltet skal ha synlig label og hjelpetekst
idstringSpesifiserer den unike identifikatoren for feltet.
counterbooleanIndikerer om en teller skal vises.
counterMaxLengthnumberSpesifiserer maksimal lengde for telleren.