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.

Live demo

Relaterte komponenter

Varianter

Variant	Beskrivelse
Default	Enkelt felt for lengre tekst
Med teller	Når du har en maksgrense på antall tegn

States

State	Beskrivelse
Default	Feltet vises i normal tilstand, klar til bruk
Hover	Når brukeren beveger musepekeren over feltet
Focus	Når brukeren har markert feltet og er klar til å skrive
Active	Når brukeren skriver i feltet
Error	Når feltet har en feil, og en forklarende feilmelding vises
Disabled	Nå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

du forventer korte svar (bruk text input)
du bare trenger valg eller avkryssing (bruk checkbox, radio button eller select)

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

Unngå

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

Unngå

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

Element	Beskrivelse
Label (etikett)	Kort og tydelig ledetekst som beskriver hva brukeren skal velge
Valgfritt-/obligatorisk	Merker feltet som valgfritt eller obligatorisk
Hjelpetekst	Kort 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
Inputfelt	Selve tekstfeltet der brukeren skriver inn
Plassholdertekst	Midlertidig tekst i feltet som indikerer at brukeren må gjøre et valg, skal ikke erstatte label
Teller	Viser 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

Prop	Type	Beskrivelse
`label`	`string`	Tekst som vises over feltet
`name`	`string`	Navn som sendes brukes i skjema ved innsending
`placeholder`	`string`	Spesifiserer en kort hint som beskriver forventet verdi av feltet.
`helptext`	`string`	Hjelpetekst som vises over feltet
`helptextDropdown`	`string`	Hjelpetekst som vises i en lukket boks man kan åpne
`helptextDropdownButton`	`string`	Tekst som vises på knappen for å åpne/lukke utvidet hjelpetekst
`rows`	`number`	Spesifiserer antall synlige rader i feltet.
`value`	`string`	Spesifiserer den nåværende verdien av feltet.
`autocomplete`	`string`	Spesifiserer hvordan type `autocomplete` feltet har. Standard er 'off'.
`ariaLabelledby`	`string`	Spesifiserer ID-en til elementet som beskriver feltet.
`required`	`boolean`	Er feltet påkrevd?
`requiredTag`	`boolean`	Indikerer om feltet er påkrevd.
`requiredText`	`string`	Tekst som vises i påkrevd-merkingen
`optionalTag`	`boolean`	Indikerer om feltet er valgfritt.
`optionalText`	`string`	Tekst som vises i valgfritt-merkingen
`tagText`	`string`	Tekst som vises i en tag ved siden av label
`hasError`	`boolean`	Indikerer om feltet har en feil.
`errorMessage`	`string`	Tekst som vises under datovelgeren ved feiltilstand
`disabled`	`boolean`	Indikerer om feltet er deaktivert.
`inline`	`boolean`	Indikerer om feltet skal vises inline.
`fullwidth`	`boolean`	Indikerer om feltet skal ta opp full bredde.
`useWrapper`	`boolean`	Indikerer at feltet skal ha synlig label og hjelpetekst
`id`	`string`	Spesifiserer den unike identifikatoren for feltet.
`counter`	`boolean`	Indikerer om en teller skal vises.
`counterMaxLength`	`number`	Spesifiserer maksimal lengde for telleren.

Farger

Element	CSS variabel
Border
Text