Textarea

Status
Figma	✅Publisert
CSS	✅Publisert
Vue	✅Publisert
React	✅Publisert
Dokumentasjon	✅Publisert

Om komponenten

Textarea (også kalt fritekstfelt) er et skjemaelement som lar brukeren skrive tekst over flere rader og skal brukes når man forventer at brukeren skal skrive inn en lengre tekst. Dersom du ønsker at brukeren skal fylle inn kortere tekst, burde Text input-komponenten tas i bruk.

Varianter

Vi har flere mulige variasjoner av fritekstfeltet. Det kan brukes helt enkelt med label og inputfelt, eller du kan legge til:

Valgfritt- eller obligatorisk-tag
Hjelpetekst
Ekspanderende hjelpetekst
Teller

Farger

Tekstfeltene skal alltid ha $brand-blue på kant og tekst. Det er ikke mulig å endre farge på tekstfeltet.

Slik bruker du komponenten

Label (etikett/ledetekst) og valgfritt/obligatorisk tag

For å fungere godt bør tekstfeltet ha en kort og tydelig ledetekst (label) og det er mulig å legge til hjelpetekst om nødvendig.

Når du skriver label kan det være greit å huske på at:

Man burde være konsis og konsistent slik at brukeren skjønner hva som forventes av hen
Om mulig: hold deg til 1-3 ord og under 20 bokstaver, inkludert mellomrom
Ikke bruk bare store eller bare små bokstaver
Ikke bruk kolon etter label

Til høyre for label kan du velge å ha enten valgfritt-tag eller obligatorisk-tag. Bruk kun én av variantene i din tjeneste eller løsning for å unngå å forvirre brukeren. Vi anbefaler å markere de valgfrie feltene.

Textarea som er obligatorisk og valgfritt.

Teller (counter)

Hvis du har begrensninger på antall tegn, kan du vise en teller for å hjelpe brukeren med å holde deg innenfor grensen. Dette er ikke en blokkering som forhindrer brukeren i å overstige grensen, men brukeren må få lov til å fullføre tankene sine før de redigerer teksten for å være innenfor grensen.

Plassholdertekst

Fritekstfeltet har mulighet for plassholdertekst, men unngå å bruke plassholdertekst med meningsbærende/viktig innhold. Den er nemlig ikke tilgjengelig for skjermlesere og kan skape forvirring for brukeren. Gå heller for ledetekst og/eller hjelpetekst.

Hjelpetekst

Valgfri hjelpetekst er relevant informasjon som hjelper brukeren med å fylle ut feltet riktig. Det brukes for eksempel ofte til å forklare riktig dataformat.

Når du skriver hjelpetekst, er det viktig at du:

Bruker store bokstaver i setningstil og skriver teksten i de fleste tilfeller som hele setninger.
Dersom du har veldig lang hjelpetekst eller har behov for å legge til lenker og lignende, bruk den ekspanderende hjelpeteksten.

Textarea med vanlig og ekspanderende hjelpetekst.

Størrelse

Pass på at høyden på inputfeltet er proporsjonalt med mengden tekst du forventer at brukerne skal skrive inn.

Textarea der inputfeltet er riktig lengde, og et eksempel der det er for smalt.

Feilmelding og validering

Hvis tekstfeltet ikke validerer, vil en feilmelding dukke opp under tekstfeltet som beskriver hva som er galt. Feilmeldingen har tre visuelle indikatorer: en rød ramme, et ikon og selve feilmeldingsteksten. Essensen av hjelpeteksten må også være inkludert i feilmeldingen. Les mer om hvordan du kan skrive en god feilmelding her (ks.no).

I textarea har man også mulighet for validering på antall tegn. Dersom man går over antall tegn blir feltet farget i rødt og telleren viser hvor mange tegn man har gått over. Du kan selv velge hvor mange tegn som er maks.