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
Kode
<TextArea label="Tilbakemelding" description="Fortell oss hva du synes" />
Komponenten kobler for/id og aria-describedby automatisk.
Eksempler
Med tooltip
Bruk tooltip for å gi ekstra kontekst som ikke er kritisk for å fullføre oppgaven. Sett alltid tooltipLabel på riktig språk — det er det tilgjengelige navnet på info-knappen.
Kode
<TextArea label="Beskrivelse" tooltip="Maks 500 tegn, ingen HTML" tooltipLabel="Mer informasjon om Beskrivelse" />
Med feilmelding
Kode
<TextArea label="Tilbakemelding" errorMessage="Tilbakemelding er påkrevd" />
Deaktivert og skrivebeskyttet
Kode
<> <TextArea label="Tilbakemelding" disabled defaultValue="Deaktivert innhold" /> <TextArea label="Tilbakemelding" readOnly defaultValue="Skrivebeskyttet innhold" /> </>
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.
Kode
<TextArea label="Tilleggskommentarer (valgfritt)" />
Antall rader
Bruk rows-attributtet for å styre standardhøyden på feltet. Standard nettleseratferd er 2 rader.
Kode
<TextArea label="Beskrivelse" rows={6} />
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).
Kode
<VStack> <TextArea label="Tilbakemelding" maxLength={200} /> <TextArea label="Begrunnelse" minLength={20} /> </VStack>
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
Hva du selv må sørge for
- 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
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.
Tastaturnavigasjon
| Tast | Handling |
|---|---|
| Tab | Flytter fokus til tekstområdet |
| Shift+Tab | Flytter fokus til forrige fokuserbare element |
| Enter | Setter 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
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 det kun når synlig label er umulig av layoutmessige grunner — skjult label gjør det vanskeligere for alle brukere å orientere seg i skjemaet.
Kode
<TextArea ariaLabel="Kommentar" />
WCAG-kriterier
Sist gjennomgått: 2026-04-13 — alle 56 WCAG 2.2-kriterier vurdert
WCAG-kriterier4 ditt ansvar · 17 håndtert · 33 ikke relevant · 0 ikke på plass
Ditt ansvar (4)
| Kriterium | Nivå | Hva du må gjøre |
|---|---|---|
| 2.4.6 Overskrifter og ledetekster | AA | Skriv beskrivende labeltekst. 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. |
| 3.3.2 Ledetekster eller instruksjoner | A | Skriv beskrivende labeltekst. 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. |
| 3.3.1 Identifikasjon av feil | A | Skriv gode feilmeldinger. 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. |
| 3.3.3 Forslag ved feil | AA | Skriv gode feilmeldinger. 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)
| Kriterium | Nivå | Hva komponenten gjør |
|---|---|---|
| 1.3.1 Informasjon og relasjoner | A | Label kobles til textarea via for/id. Hjelpetekst og feilmelding kobles via aria-describedby. |
| 1.3.2 Meningsfull rekkefølge | A | Label, textarea, hjelpetekst og feilmelding følger naturlig rekkefølge i DOM. |
| 1.3.3 Sensoriske egenskaper | A | Feiltilstand bruker tekst, farge og aria-invalid — ikke farge alene. |
| 1.4.1 Bruk av farge | A | Feiltilstand kommuniseres med farge, rammeendring og tekstlig feilmelding. |
| 1.4.4 Endre tekststørrelse | AA | Relative enheter — skalerer korrekt ved 200 % zoom. |
| 1.4.10 Omflyt | AA | Reflower korrekt ned til 320px viewport. |
| 1.4.11 Kontrast for ikke-tekstlig innhold | AA | Ramme og fokusindikator oppfyller 3:1 kontrastkrav. |
| 1.4.12 Tekstavstand | AA | Tåler økt line-height, bokstav- og ordavstand uten tap av innhold. |
| 1.4.13 Innhold ved hover eller fokus | AA | Hjelpetekst er persistent — forsvinner ikke ved fokusflytt. |
| 2.1.1 Tastatur | A | Fullt opererbart med Tab og standard textarea-oppførsel. |
| 2.1.2 Ingen tastaturfelle | A | Fokus kan navigeres ut med Tab og Shift+Tab. |
| 2.4.3 Fokusrekkefølge | A | Følger naturlig tab-rekkefølge i DOM. |
| 2.4.7 Synlig fokus | AA | Tydelig fokusindikator med god kontrast. |
| 2.5.8 Målstørrelse (minimum) | AA | Tekstområdet oppfyller minimum 24x24px klikkflate. |
| 3.2.1 Ved fokus | A | Fokus trigger ingen kontekstendring. |
| 3.2.2 Ved inndata | A | Input trigger ingen automatisk kontekstendring. |
| 4.1.2 Navn, rolle, verdi | A | Native textarea med implisitt rolle 'textbox' (multiline). Tilgjengelig navn fra label. Tilstander eksponeres korrekt. |
Ikke relevant (33)
| Kriterium | Nivå | Hvorfor ikke relevant |
|---|---|---|
| 1.1.1 Ikke-tekstlig innhold | A | |
| 1.2.1 Bare lyd og bare video (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.2 Teksting (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.3 Synstolking eller mediealternativ (forhåndsinnspilt) | A | Ingen medieelementer. |
| 1.2.4 Teksting (direkte) | AA | Ingen medieelementer. |
| 1.2.5 Synstolking (forhåndsinnspilt) | AA | Ingen medieelementer. |
| 1.3.4 Visningsretning | AA | Ingen fast orientering — tilpasser seg visningsretning. |
| 1.3.5 Identifiser formål med inndata | AA | Typiske 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 lyd | A | Ingen lydelementer. |
| 1.4.5 Bilder av tekst | AA | Ingen bilder av tekst. |
| 2.1.4 Tastatursnarveier | A | Ingen egendefinerte tastatursnarveier. |
| 2.2.1 Justerbar hastighet | A | Ingen tidsbegrensede funksjoner. |
| 2.2.2 Pause, stopp, skjul | A | Ingen animasjon eller automatisk oppdatering. |
| 2.3.1 Terskelverdi på tre glimt | A | Ingen blinkende eller glimtende innhold. |
| 2.4.1 Hoppe over blokker | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.2 Sidetitler | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.4 Formål med lenke (i kontekst) | A | Ingen lenker i komponenten. |
| 2.4.5 Flere måter | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 2.4.11 Fokus ikke skjult (minimum) | AA | Ingen sticky/overlappende elementer som kan skjule fokus. |
| 2.5.1 Pekerbevegelser | A | Ingen drag-and-drop eller sveipebevegelser. |
| 2.5.2 Avbryt peker | A | Native textarea — nettleseren håndterer pekerinteraksjon. |
| 2.5.4 Bevegelsesaktivering | A | Ingen bevegelsesbasert interaksjon. |
| 2.5.6 Samtidige inndatamekanismer | A | Ingen begrensning av input-type — native HTML textarea. |
| 2.5.7 Drabevegelser | A | Ingen drag-and-drop. |
| 3.1.1 Språk på siden | A | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.1.2 Språk på deler av innhold | AA | Komponenten setter ikke lang-attributt — innhold er på sidespråket. |
| 3.2.3 Konsistent navigasjon | AA | Sidekrav — gjelder ikke enkeltkomponenter. |
| 3.2.4 Konsistent identifikasjon | AA | Systemkrav — gjelder konsistens på tvers av sider, ikke enkeltkomponenter. |
| 3.2.6 Konsistent hjelp | A | Sidekrav — gjelder plassering av hjelpefunksjon på tvers av sider. |
| 3.3.4 Forhindring av feil (juridisk, økonomisk, data) | AA | Flytkrav — gjelder bekreftelse/reversering av transaksjoner, ikke enkeltfelter. |
| 3.3.7 Redundant oppføring | A | Flytkrav — gjelder at brukeren ikke skal gjenta informasjon i en prosess. |
| 3.3.8 Tilgjengelig autentisering (minimum) | AA | Ikke en autentiseringskomponent. |
| 4.1.3 Statusmeldinger | AA | Feilmeldinger håndteres via aria-live="polite" (dekket av 3.3.1). Ingen øvrige statusmeldinger. |
Props / API
TextAreaProps
| Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
label | string | Nei* | Synlig labeltekst for feltet. Anbefalt fremfor ariaLabel | |
ariaLabel | string | Nei* | Skjult label for skjermlesere. Brukes kun når synlig label ikke er mulig. *Enten label eller ariaLabel må settes | |
description | string | Nei | Hjelpetekst som vises under label. Kobles til textarea via aria-describedby | |
errorMessage | string | Nei | Feilmelding som vises under textarea. Trigger aria-invalid når den har innhold | |
className | string | Nei | CSS-klasse på ytterste wrapper (.ix-field) | |
ref | Ref<HTMLTextAreaElement> | Nei | Ref videresendes til <textarea>-elementet |
I tillegg støttes alle standard HTML textarea-attributter (value, defaultValue, onChange, onBlur, placeholder, disabled, readOnly, required, id, name, rows, cols, maxLength, minLength, autoComplete osv.) som settes direkte på komponenten — de sendes videre til <textarea>. maxLength/minLength aktiverer tegnteller automatisk.
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
| Element | Selektor |
|---|---|
| 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:
| Hva | Hvor | Hvorfor |
|---|---|---|
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-span | Nødvendig for aria-describedby-kobling |
id="ix-field-1-error" | error-span | Nødvendig for aria-describedby-kobling |
aria-describedby="... ..." | <textarea> | Skjermleseren leser description og feilmelding etter label og verdi |
aria-live="polite" | error-span | Skjermleseren 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.