Textarea

const Preview = () => {
  return (
    <>
      <Label htmlFor='my-textarea'>Label</Label>
      <Textarea id='my-textarea' />
    </>
  );
};

render(<Preview />)

Bruk Textarea når

• brukeren skal kunne skrive mer enn én linje tekst
• brukeren skal få plass til å formulere seg fritt
• svaret ikke har en fast struktur

Unngå Textarea når

• du forventer korte svar, bruk heller Textfield
• det er strukturerte data som skal valideres, f.eks fødselsnummer eller dato

Eksempel

Angi høyden

I kode kan en utvikler bestemme hvor mange rader et tekstområde skal ha ved å sette rows-attributtet. Dette påvirker kun den initielle høyden på feltet.

Dette er nyttig for å gi brukeren en indikasjon på hvor mye tekst som forventes.

const WithRows = () => {
  return (
    <>
      <Label htmlFor='my-textarea-rows'>Beskrivelse</Label>
      <Textarea id='my-textarea-rows' rows={6} />
    </>
  );
};

render(<WithRows />)

Disabled

Unngå å deaktivere Textarea hvis du kan. Det kan være vanskelig for brukerne å forstå hvorfor feltet ikke kan brukes. Les mer om hvorfor deaktiverte tilstander er problematiske (nav.no) og hvilke alternativer som finnes.

const Disabled = () => {
  return (
    <>
      <Label htmlFor='my-textarea-disabled'>Label</Label>
      <Textarea id='my-textarea-disabled' disabled value='Disabled textarea' />
    </>
  );
};

render(<Disabled />)

ReadOnly

Siden et tekstfelt normalt forventes å være redigerbart, kan readOnly virke forvirrende. Bruk det derfor bare når det er helt nødvendig. I mange tilfeller er det bedre å vise informasjonen som vanlig tekst enn å bruke readOnly.

Felter med readonly-attributtet er en del av tabrekkefølgen. Brukere kan kopiere innholdet, men ikke endre det. Informasjonen i et readonly-felt blir sendt inn sammen med skjemaet. readOnly kan derfor være aktuelt når informasjonen skal inngå i en oppsummering som sendes inn i skjemaet.

Viktig: Hvis du velger å bruke readOnly, må du forklare brukeren hvorfor innholdet ikke kan redigeres.

const ReadOnly = () => {
  return (
    <Field>
      <Label htmlFor='my-textarea-readonly'>Beskrivelse av saken</Label>
      <FieldDescription>
        Teksten er lagt inn automatisk basert på det du allerede har sendt inn,
        og kan ikke redigeres.
      </FieldDescription>
      <Textarea
        id='my-textarea-readonly'
        readOnly
        value='Jeg søker om støtte fordi jeg trenger midler til å gjennomføre prosjektet slik det er planlagt.'
      />
    </Field>
  );
};

render(<ReadOnly />)

Retningslinjer

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.

Vær oppmerksom på at brukerne kan synes det er vanskelig å skrive fritekst eller svare på åpne spørsmål. Noen ganger 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 radio.

Størrelse og tilpasning

Høyden på tekstområdet

Høyden på textarea bør tilpasses forventet tekstmengde. Forventer du at brukeren skal skrive tre linjer, bør høyden reflektere dette. For lengre tekster er det viktig å gi mer visuell plass for en bedre brukeropplevelse. Du kan endre høyde med rows="{number}".

Textarea skal kunne tilpasses i høyden, når brukeren har behov for mer plass. Feltet vil automatisk utvide seg når brukeren skriver, dersom du ikke setter rows, slik at de alltid kan se hele innholdet sitt uten å måtte bruke rullefelt.

Bredden 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.

Øvrige retningslinjer

I tillegg til disse retningslinjene, bør du også følge de generelle retninglinjene for Textfield:

• Unngå plassholdertekster
• Inndata og formatering
• Tekst
• Tilgjengelighet