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, RadioGroup eller Checkbox)
- Input med tydelig format (f.eks. dato, telefonnummer)
- Situasjoner der én linje er tilstrekkelig
Bruk
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.
Med feilmelding
Deaktivert og skrivebeskyttet
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.
Antall rader
Bruk rows-attributtet for å styre standardhøyden på feltet. Standard nettleseratferd er 2 rader.
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).
Tellerens ID inkluderes automatisk i aria-describedby slik at skjermlesere får det med.
Retningslinjer
Si hva teksten skal inneholde
Et tomt, stort felt gir få holdepunkter. Bruk label og hjelpetekst til å si hva du er ute etter, og gjerne hvor mye: "Beskriv hva som skjedde, og når" sier mer enn "Beskrivelse".
Hjelpeteksten er stedet for eksempler og krav, ikke placeholder. Placeholder-teksten forsvinner i det brukeren begynner å skrive, og i et langt svar er det nettopp underveis veiledningen trengs.
Tilpass høyden til svaret du venter
Sett rows etter hvor mye tekst du regner med. Høyden er det første signalet brukeren får
om omfanget: tre linjer inviterer til en setning, tolv linjer til en historie.
Brukeren kan dra feltet høyere selv. Horisontal resize er slått av for at feltet ikke skal
sprenge layouten, og disabled og readOnly skjuler håndtaket.
Håndter lange tekster
Blir teksten lang, må den fortsatt være lett å lese og redigere. Scroll i feltet eller automatisk utvidelse fungerer begge, men en auto-resize som flytter knappene under feltet mens brukeren skriver, er verre enn scroll.
Valider når brukeren er ferdig
I et felt for løpende tekst er halvskrevne setninger normaltilstanden. Valider på blur eller ved innsending, ikke mens brukeren holder på.
Vis tegngrensen hvis det finnes en
Sett maxlength, så får feltet en teller som viser hvor mange tegn som er igjen. En
grense som stille kutter teksten er det verste alternativet: brukeren mister ord uten å
få vite hvorfor.
minlength gir samme teller, men den teller oppover mot minimumet.
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.
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 egen 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.