Skip to main content

TextArea

TextArea lar brukeren skrive inn lengre fritekst over flere linjer, som beskrivelser, meldinger eller begrunnelser.

Egnet til​

  • Lengre fritekst (flere linjer)
  • Meldinger, kommentarer eller beskrivelser
  • Situasjoner der brukeren trenger plass til å formulere seg
  • Input uten strengt format eller fast lengde

Uegnet til​

  • Kort og strukturert input (bruk TextField)
  • Valg fra forhåndsdefinerte alternativer (bruk select, radio eller checkbox)
  • Input med tydelig format (f.eks. dato, telefonnummer)
  • Situasjoner der én linje er tilstrekkelig

Kom i gang​

Live Editor
<TextArea
  label="Tilbakemelding"
  description="Fortell oss hva du synes"
/>
Result
Loading...

Komponenten kobler for/id og aria-describedby automatisk.

Eksempler​

Med feilmelding​

Live Editor
<TextArea
  label="Tilbakemelding"
  errorMessage="Tilbakemelding er påkrevd"
/>
Result
Loading...

Deaktivert og skrivebeskyttet​

Live Editor
<>
  <TextArea
    label="Tilbakemelding"
    disabled
    inputProps={{ value: 'Deaktivert innhold' }}
  />
  <TextArea
    label="Tilbakemelding"
    readOnly
    inputProps={{ value: 'Skrivebeskyttet innhold' }}
  />
</>
Result
Loading...

disabled og readOnly settes direkte på textarea. ix-field tar seg av den visuelle tilstanden automatisk. Resize-håndtaket skjules automatisk for disabled og readOnly.

Valgfrie felt​

Merk unntaket — ikke regelen. Legg til (valgfritt) i labelteksten når feltet ikke er obligatorisk.

Live Editor
<TextArea
  label="Tilleggskommentarer (valgfritt)"
/>
Result
Loading...

Antall rader​

Bruk rows-attributtet for å styre standardhøyden på feltet. Standard nettleseratferd er 2 rader.

Live Editor
<TextArea
  label="Beskrivelse"
  inputProps={{ rows: 6 }}
/>
Result
Loading...

Tegnteller​

Sett maxlength eller minlength på textarea — ix-field oppretter og oppdaterer en tegnteller automatisk. Med maxlength vises 0/200, med minlength vises 0 tegn (minimum 20).

Live Editor
<VStack>
  <TextArea
    label="Tilbakemelding"
    inputProps={{ maxLength: 200 }}
  />
  <TextArea
    label="Begrunnelse"
    inputProps={{ minLength: 20 }}
  />
</VStack>
Result
Loading...

Tellerens ID inkluderes automatisk i aria-describedby slik at skjermlesere får det med.

Retningslinjer​

Tydelige labels gir forutsigbarhet​

Alle TextArea skal ha en synlig og beskrivende label. Labelen skal beskrive hvilken informasjon brukeren skal skrive inn, ikke hva de skal gjøre.

Skriv "Beskrivelse av hendelsen" i stedet for "Skriv en beskrivelse". Dette gjør det enklere å forstå hva som forventes og gir bedre støtte når brukeren skal formulere seg.

Gi tydelige forventninger til innhold​

Når brukeren skal skrive lengre tekst, er det ekstra viktig å gi føringer for hva som forventes. Dette kan gjøres gjennom label eller hjelpetekst.

Uten tydelig retning kan brukeren bli usikker på hva de skal skrive, hvor mye som forventes, og hva som er relevant informasjon.

Unngå placeholder som informasjonsbærer​

Placeholder anbefales ikke brukt som bærer av viktig informasjon. Når brukeren begynner å skrive, forsvinner teksten.

Bruk heller label og hjelpetekst for å gi varig veiledning.

Hjelpetekst gir støtte underveis​

Hjelpetekst kan brukes for å gi eksempler eller forklare hva som bør inkluderes. Dette er spesielt nyttig i TextArea, der oppgaven ofte er mer åpen.

Kort og konkret veiledning kan redusere usikkerhet og forbedre kvaliteten på input. "Maks 500 tegn" er bedre enn ingen veiledning.

Tilpass høyde til forventet innhold​

Høyden på TextArea bør reflektere hvor mye tekst som forventes. Bruk rows for å sette en passende standardhøyde.

Et for lite felt kan oppleves begrensende, mens et for stort felt kan virke overveldende. Riktig høyde gir en visuell indikasjon på omfanget av oppgaven og gjør det lettere å komme i gang.

Resize​

Brukere kan endre høyden på feltet vertikalt. Horisontal resize er deaktivert for å unngå brudd i layout. disabled og readOnly skjuler resize-håndtaket.

Håndter lange tekster på en god måte​

Når innholdet blir langt, må det være enkelt å lese og redigere teksten.

Dette kan løses med scrolling eller automatisk utvidelse av feltet. Dersom auto-resize brukes, må det skje på en måte som ikke bryter layout eller flytter innhold uforutsigbart.

Validering bør ikke forstyrre skrivingen​

Siden brukeren ofte skriver sammenhengende tekst, bør validering ikke skje mens de skriver.

Valider heller ved blur eller innsending, slik at brukeren får skrive ferdig før de får tilbakemelding.

Vurder behov for tegnbegrensning​

Dersom det er en maksgrense for tekst, bør dette kommuniseres tydelig. Sett maxlength på textarea — da får brukeren automatisk en tegnteller som viser gjenværende tegn. En stille grense som kutter teksten uten tilbakemelding er forvirrende.

minlength kan brukes når et minimum antall tegn forventes — telleren viser da hvor mange tegn som er skrevet inn så langt.

Universell utforming​

Sist gjennomgått: 2026-04-13 — 54 av 56 WCAG 2.2-kriterier vurdert

Ditt ansvar

Disse tingene må teamet selv sørge for.

Skriv beskrivende labeltekst — WCAG 2.4.6, 3.3.2

Labelen skal forklare hva som skal fylles inn. "Tilbakemelding" er bedre enn "Skriv noe". Alle felter må ha en label, selv om den er visuelt skjult med .ix-sr-only.

Skriv gode feilmeldinger — WCAG 3.3.1, 3.3.3

Feilmeldingen må si hva som er galt og hva brukeren skal gjøre. "Meldingen kan ikke være tom" — ikke "Ugyldig verdi". Komponenten viser og annonserer meldingen, men du skriver innholdet.

Håndtert av komponenten (17 kriterier bestått)
KriteriumNivåHva komponenten gjør
1.3.1 Informasjon og relasjonerALabel kobles til textarea via for/id. Hjelpetekst og feilmelding kobles via aria-describedby.
1.3.2 Meningsfull rekkefølgeALabel, textarea, hjelpetekst og feilmelding følger naturlig rekkefølge i DOM.
1.3.3 Sensoriske egenskaperAFeiltilstand bruker tekst, farge og aria-invalid — ikke farge alene.
1.4.1 Bruk av fargeAFeiltilstand kommuniseres med farge, rammeendring og tekstlig feilmelding.
1.4.4 Endre tekststørrelseAARelative enheter — skalerer korrekt ved 200 % zoom.
1.4.10 OmflytAAReflower korrekt ned til 320px viewport.
1.4.11 Kontrast for ikke-tekstlig innholdAARamme og fokusindikator oppfyller 3:1 kontrastkrav.
1.4.12 TekstavstandAATåler økt line-height, bokstav- og ordavstand uten tap av innhold.
1.4.13 Innhold ved hover eller fokusAAHjelpetekst er persistent — forsvinner ikke ved fokusflytt.
2.1.1 TastaturAFullt opererbart med Tab og standard textarea-oppførsel.
2.1.2 Ingen tastaturfelleAFokus kan navigeres ut med Tab og Shift+Tab.
2.4.3 FokusrekkefølgeAFølger naturlig tab-rekkefølge i DOM.
2.4.7 Synlig fokusAATydelig fokusindikator med god kontrast.
2.5.8 Målstørrelse (minimum)AATekstområdet oppfyller minimum 24x24px klikkflate.
3.2.1 Ved fokusAFokus trigger ingen kontekstendring.
3.2.2 Ved inndataAInput trigger ingen automatisk kontekstendring.
4.1.2 Navn, rolle, verdiANative textarea med implisitt rolle 'textbox' (multiline). Tilgjengelig navn fra label. Tilstander eksponeres korrekt.
Ikke relevant for denne komponenten (33 kriterier)
KriteriumHvorfor ikke relevant
1.1.1 Ikke-tekstlig innhold
1.2.1 Bare lyd og bare video (forhåndsinnspilt)Ingen medieelementer.
1.2.2 Teksting (forhåndsinnspilt)Ingen medieelementer.
1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt)Ingen medieelementer.
1.2.4 Teksting (direkte)Ingen medieelementer.
1.2.5 Synstolking (forhåndsinnspilt)Ingen medieelementer.
1.3.4 VisningsretningIngen fast orientering — tilpasser seg visningsretning.
1.3.5 Identifiser formål med inndataTypiske textarea-brukstilfeller (kommentarer, beskrivelser, tilbakemeldinger) samler ikke personlig informasjon og er derfor unntatt. Dersom feltet brukes til personlig informasjon (f.eks. postadresse), gjelder kravet og autocomplete bør settes.
1.4.2 Styring av lydIngen lydelementer.
1.4.5 Bilder av tekstIngen bilder av tekst.
2.1.4 TastatursnarveierIngen egendefinerte tastatursnarveier.
2.2.1 Justerbar hastighetIngen tidsbegrensede funksjoner.
2.2.2 Pause, stopp, skjulIngen animasjon eller automatisk oppdatering.
2.3.1 Terskelverdi på tre glimtIngen blinkende eller glimtende innhold.
2.4.1 Hoppe over blokkerSidekrav — gjelder ikke enkeltkomponenter.
2.4.2 SidetitlerSidekrav — gjelder ikke enkeltkomponenter.
2.4.4 Formål med lenke (i kontekst)Ingen lenker i komponenten.
2.4.5 Flere måterSidekrav — gjelder ikke enkeltkomponenter.
2.4.11 Fokus ikke skjult (minimum)Ingen sticky/overlappende elementer som kan skjule fokus.
2.5.1 PekerbevegelserIngen drag-and-drop eller sveipebevegelser.
2.5.2 Avbryt pekerNative textarea — nettleseren håndterer pekerinteraksjon.
2.5.4 BevegelsesaktiveringIngen bevegelsesbasert interaksjon.
2.5.6 Samtidige inndatamekanismerIngen begrensning av input-type — native HTML textarea.
2.5.7 DrabevegelserIngen drag-and-drop.
3.1.1 Språk på sidenSidekrav — gjelder ikke enkeltkomponenter.
3.1.2 Språk på deler av innholdKomponenten setter ikke lang-attributt — innhold er på sidespråket.
3.2.3 Konsistent navigasjonSidekrav — gjelder ikke enkeltkomponenter.
3.2.4 Konsistent identifikasjonSystemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter.
3.2.6 Konsistent hjelpSidekrav — gjelder plassering av hjelpefunksjon på tvers av sider.
3.3.4 Forhindring av feil (juridisk, økonomisk, data)Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter.
3.3.7 Redundant oppføringFlytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess.
3.3.8 Tilgjengelig autentisering (minimum)Ikke en autentiseringskomponent.
4.1.3 StatusmeldingerFeilmeldinger håndteres via aria-live="polite" (dekket av 3.3.1). Ingen øvrige statusmeldinger.

Tastaturnavigasjon

TastHandling
TabFlytter fokus til tekstområdet
Shift+TabFlytter fokus til forrige fokuserbare element
EnterSetter inn linjeskift

Skjermleser

  • Ved fokus: "[label], tekstområde"
  • Med hjelpetekst: "[label], tekstområde, [hjelpetekst]"
  • Ved feil: "[label], ugyldig, tekstområde, [feilmelding]"
  • Med skjult label: "[label], tekstområde" — labelen leses opp selv om den ikke er synlig

Hva komponenten gjør automatisk​

Når du bruker <ix-field> eller React-komponenten, settes dette opp for deg:

  • for/id: Label kobles til textarea. Genererer en unik ID hvis textarea mangler en.
  • aria-describedby: Textarea peker til description og error-elementet. Hjelpetekst leses før feilmelding.
  • aria-live="polite": Settes på error-elementet slik at skjermlesere annonserer nye feilmeldinger uten å avbryte brukeren.
  • aria-invalid: Synkroniseres automatisk med innholdet i error-elementet via MutationObserver.
  • required: Settes på textarea for nativ nettleservalidering. Ingen visuell indikator — merk valgfrie felt med (valgfritt) i labelteksten.

Skjult label med ariaLabel​

Synlig label er alltid anbefalt. I tilfeller der konteksten er helt åpenbar fra omgivelsene (f.eks. et kommentarfelt rett under en overskrift som allerede beskriver det), kan ariaLabel brukes i stedet.

Bruk synlig label

Skjult label gjør det vanskeligere for alle brukere å orientere seg i skjemaet. Bruk ariaLabel kun når synlig label er umulig av layoutmessige grunner, og teksten er meningsfull for skjermleserbrukere.

Live Editor
<TextArea ariaLabel="Kommentar" />
Result
Loading...

Hva du selv må sørge for​

Ditt ansvar
  • Meningsfull labeltekst — komponenten kobler label til textarea, men du må skrive god tekst
  • Gode feilmeldinger — komponenten viser dem og annonserer dem, men du skriver innholdet

Props / API​

TextAreaProps​

PropTypePåkrevdStandardBeskrivelse
labelstringNei*Synlig labeltekst for feltet. Anbefalt fremfor ariaLabel
ariaLabelstringNei*Skjult label for skjermlesere. Brukes kun når synlig label ikke er mulig. *Enten label eller ariaLabel må settes
descriptionstringNeiHjelpetekst som vises under label. Kobles til textarea via aria-describedby
errorMessagestringNeiFeilmelding som vises under textarea. Trigger aria-invalid når den har innhold
placeholderstringNeiPlaceholder-tekst. Bør ikke brukes som bærer av viktig informasjon
disabledbooleanNeifalseDeaktiverer feltet helt. Ingen fokus eller interaksjon
readOnlybooleanNeifalseBrukeren kan fokusere og kopiere, men ikke endre verdien
requiredbooleanNeifalseSetter required på textarea for nativ nettleservalidering
refRef<HTMLTextAreaElement>NeiRef videresendes til <textarea>-elementet
inputIdstringNeiAuto-generertEksplisitt ID for textarea-elementet. Brukes også for label[for]
inputPropsTextareaHTMLAttributesNeiAlle standard HTML textarea-attributter, inkl. rows, maxLength, minLength, cols. maxLength/minLength aktiverer tegnteller automatisk
classNamestringNeiCSS-klasse på ytterste wrapper (.ix-field)

Tilpasning med CSS​

Trenger du ix-text-area-stylingen på HTML du setter sammen selv — uten React-komponenten eller <ix-field> — kan du bruke klassene direkte på elementene dine.

Tilgjengelige klasser og selektorer​

ElementSelektor
Textarea-wrapper.ix-text-area
Tekstområde.ix-text-area > textarea eller .ix-text-area__textarea
Label.ix-label
Hjelpetekst[data-field="description"]
Feilmelding[data-field="error"]

.ix-text-area__textarea gir textarea-elementet nøyaktig samme stilregler som .ix-text-area > textarea. Bruk den når du ikke kan eller vil bruke komponentens HTML-struktur.

Eksempel: bruk i eigen HTML-struktur​

<ix-field>
  <label>Tilbakemelding</label>
  <span data-field="description">Fortell oss hva du synes</span>
  <div class="ix-text-area">
    <textarea class="ix-text-area__textarea" rows="4"></textarea>
  </div>
  <span data-field="error"></span>
</ix-field>

Hva ix-field gjør med DOM-en​

<ix-field> er en web component som setter opp ARIA-koblinger automatisk når den kobles til DOM. Her er hva som skjer — fra HTML du skriver til HTML etter at ix-field har kjørt.

Før (det du skriver):

<ix-field>
  <label>Tilbakemelding</label>
  <span data-field="description">Fortell oss hva du synes</span>
  <div class="ix-text-area">
    <textarea rows="4"></textarea>
  </div>
  <span data-field="error"></span>
</ix-field>

Etter (det som er i DOM etter at ix-field har kjørt):

<ix-field>
  <label for="ix-field-1">Tilbakemelding</label>
  <span data-field="description" id="ix-field-1-description">Fortell oss hva du synes</span>
  <div class="ix-text-area">
    <textarea rows="4" id="ix-field-1"
              aria-describedby="ix-field-1-description ix-field-1-error"></textarea>
  </div>
  <span data-field="error" id="ix-field-1-error" aria-live="polite"></span>
</ix-field>

Hva som ble lagt til:

HvaHvorHvorfor
for="ix-field-1"<label>Kobler label til textarea — klikk på label gir fokus til feltet
id="ix-field-1"<textarea>Grunnlag for alle ARIA-koblinger. Genereres bare om textarea mangler en ID
id="ix-field-1-description"description-spanNødvendig for aria-describedby-kobling
id="ix-field-1-error"error-spanNødvendig for aria-describedby-kobling
aria-describedby="... ..."<textarea>Skjermleseren leser description og feilmelding etter label og verdi
aria-live="polite"error-spanSkjermleseren annonserer feilmeldinger automatisk når de dukker opp

Når error-span får innhold setter ix-field i tillegg aria-invalid="true" på textarea automatisk via MutationObserver. Når den tømmes fjernes attributten igjen.

Relatert​

  • TextField — for kortere tekstinput på én linje
  • Typografi — skriftstørrelser og fontvekter brukt i feltet
  • Spacing — avstandene mellom label, textarea og feilmelding