docs: textarea

packages/react/src/components/form/Textarea/Textarea.mdx

@@ -4,16 +4,91 @@ import * as TextareaStories from './Textarea.stories';
 
 <Meta of={TextareaStories} />
 
-# Textarea
+# Textarea 
+`Textarea` brukes når vi vil gi brukerne mulighet til å legge inn tekst som er lengre enn én linje. 
+
 
 <Primary />
 <Controls />
 
+## Eksempler på bruk
+
+### Antall tegn
+
+
+{/* <Canvas of={TextareaStories.WithCharacterCounter} /> */}
 
-## Kontrollert
+### Kontrollert
 
 <Canvas of={TextareaStories.Controlled} />
 
-## Full bredde
+### Full bredde
+Denne varianten strekker tekstområdet til å fylle hele bredden av tilgjengelig plass. Brukes når tekstfeltet skal stå ut som et hovedfelt eller når det er behov for maksimal skriveplass.
 
 <Canvas of={TextareaStories.FullWidth} />
+
+### Begrense antall tegn
+Vis antall tegn tekstområdet tillater hvis du bruker denne typen feilmeldinger:
+
+<br />
+
+## Retningslinjer for bruk av `Textarea`
+Bruk `Textarea`når brukerne forventes å skrive inn mer enn én linje med tekst, for eksempel ved åpne spørsmål, tilbakemeldinger, eller andre situasjoner hvor lengre tekstinnhold er nødvendig.
+
+<br />
+
+Passer til å
+* gi mulighet for lengre tekster/svar, for eksempel et avsnitt eller en kommentar.
+
+<br />
+
+Passer ikke til å
+* legge inn formaterte data, for eksempel markdown
+* Korte svar eller strukturert data som e-postadresser og telefonnummer – bruk standard tekstfelt for disse for en bedre brukeropplevelse.
+
+<br />
+
+### Alternativer til fritekst
+Vær oppmerksom på at brukerne kan synes det er vanskelig å skrive fritekst eller svare på åpne spørsmål. Da kan det være bedre å bryte opp spørsmålet i flere enklere spørsmål, og gi brukerne mulighet til å svare med for eksempel alternativknapper (`radio`).
+
+<br />
+
+
+## Størrelse og tilpasning
+
+### Høyden på tekstområdet
+`Textarea` skal kunne tilpasses i høyden. Feltet vil automatisk utvide seg når brukeren skriver, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt.
+
+ <br />
+
+### Bredde på teksområdet
+Et tekstområde bør ikke være bredere enn 50–75 tegn inkludert mellomrom. Hvis vi holder oss til det, blir lesbarheten best for alle brukere.
+
+<br />
+
+### Tillat kopier og lim inn
+Brukere som skal fylle ut et tekstområde, trenger ofte å kopiere og lime inn informasjon, så denne funksjonen må ikke deaktiveres. Dette gjør det enkelt for brukerne å fylle inn nødvendige opplysninger uten begrensninger.
+
+<br />
+
+## Tekst i komponenten 
+Sett alltid `label` (ledetekst) og eventuelt `description` (beskrivelse) over `textarea`, slik at det er lett å se på små skjermer. Pass på at det ikke dekker eventuelle feilmeldinger.
+
+<br />
+
+* Hold ledeteksten kort, unngå at den går over to linjer
+* Unngå å legge til beskrivelse som ikke er relevant eller meningsfull for brukeren
+* Unngå å bruke kolon etter `label`
+* Ikke bruk  `placeholder` (plassholdertekst) i `textarea`. Teksten forsvinner når brukerne skriver. Kontrastkravene i WCAG gjelder for `placeholder` også, og da blir teksten så mørk at brukerne kan oppfatte `textarea` som utfylt
+
+<br />
+
+### Tekst i feilmeldinger for text area 
+Skriv kort og konkret og gi brukerne informasjon som gjør at de kan løse problemet. Pass på at teksten i feilmeldinger følger retningslinjene vi har her: [Feilmeldinger i skjema – Designsystemet](https://www.designsystemet.no/monstre/feilmeldinger) 
+
+<br />
+
+
+## Tilgjengelighet 
+
+Ikke bruk deaktivert tilstand (disabled state) på `textarea`. Vurder heller om det er nødvendig å vise `textarea` i det hele tatt, eller om du kan presentere informasjonen som ren tekst eller bruke en "Read Only"-tilstand.