TextArea

Egnet til:

• Legge i tekster som er lengre enn én linje
• Fritekst og svar

Uegnet til:

• Formatert tekst (for eksempel markdown)

Komponenter som ligner:

• TextField

Teknisk dokumentasjon

Se TextArea i Storybook for tekniske detaljer

Read-only

Readonly-attributtet spesifiserer at et inputfelt i et skjema er skrivebeskyttet. Et skrivebeskyttet felt kan ikke endres, men brukere kan tabbe til det, markere det og kopiere tekst fra det. Til forskjell fra disabled-felter vil innholdet i readonly-felter inkluderes når et skjema sendes inn.

Slik bruker du komponenten

Ledetekst, beskrivelse og hjelpetekst

Ledetekst og beskrivelse er alltid plassert over tekstfeltet slik at det er godt synlig på små skjermer og ikke kommer i konflikt med feilmelding. Unngå at ledeteksten går over flere linjer, men bruk i stedet beskrivelsesfeltet for å forklare detaljer. Hvis du har ytterligere behov for å veilede brukeren i utfyllingen kan du legge til en lengre hjelpetekst bak et spørsmålstegn. 

Ikke bruk placeholder-tekst

Vi fraråder bruk av placeholder-tekst. Placeholder-tekster kan være usynlige for skjermlesere, og teksten forsvinner når brukeren begynner å skrive i feltet. På grunn av kontrastkravet på minst 4,5 kan brukere dessuten tro at felter med placeholder-tekst allerede er utfylt.

For å unngå brudd på universell utforming, bør du heller sørge for at all nødvendig informasjon ligger i ledeteksten og/eller beskrivelsen.

Innstillinger for fritekst

Du kan begrense hvor mye tekst brukeren kan skrive med de innebygde HTML-attributtene minLength og maxLength:

• maxLength setter en øvre grense for hvor mange tegn brukeren kan skrive inn.
• minLength setter et minimumskrav, og vil føre til valideringsfeil dersom brukeren skriver for få tegn.

Hvis du setter maxLength, bør du også bruke characterLimit. Dette gir brukeren løpende tilbakemelding på hvor mange tegn som gjenstår, eller hvor mye grensen er overskredet.

Komponenten håndterer ikke visning av feilmeldinger. Konsumenten må selv:

• validere input
• vise feilmelding når kravene til minLength eller maxLength ikke oppfylles

Merk at minLength ikke er det samme som å gjøre feltet obligatorisk. For å kreve at brukeren fyller ut feltet, skal du bruke required.

God praksis og relaterte mønstre 

• Skriveregler for ledetekster og hjelpetekster.
• Mønster for obligatoriske felt.

Universell utforming  

• Kun placeholder-attributt er ikke tilstrekkelig for å bestå WCAG. Ledetekst (label/aria-label) og placeholder skal ikke være identiske. Placeholder-tekst er ment for å gi et hint om det som skal skrives i feltet.
• Feilmeldingen skal vises i umiddelbar nærhet til elementet den hører til. I Skatteetaten vises meldingen under tilhørende felt. Husk at kontrastkravet, minst 4,5 i kontrast for vanlig tekststørrelse, også gjelder på feilmeldinger (komponent oppfyller kravet som standard).