Textarea

Samme utseende og tilstander som Input, for svar som blir lengre enn én linje.

import "@fristil/designsystem/tokens.css"
import "@fristil/designsystem/textarea.css"

Tilstander

Eksempel

Kode

<label class="fs-label" for="begrunnelse">Begrunnelse</label>
<textarea class="fs-textarea" id="begrunnelse" rows="3"
placeholder="Skriv en kort begrunnelse"></textarea>

<label class="fs-label" for="melding">Melding til saksbehandler</label>
<textarea class="fs-textarea" id="melding" rows="2"
data-state="success">Jeg flytter til ny adresse 1. juni.</textarea>

<label class="fs-label" for="svar">Utfyllende svar</label>
<textarea class="fs-textarea" id="svar" rows="2"
data-state="invalid" aria-invalid="true">For kort</textarea>

<label class="fs-label" for="merknad">Merknad</label>
<textarea class="fs-textarea" id="merknad" rows="2"
disabled>Saken er avsluttet og kan ikke endres.</textarea>

data-state	Brukes til
(utelatt)	Normaltilstand
invalid	Valideringen har feilet
success	Innholdet er bekreftet gyldig

data-state er farge. Skjermlesere trenger aria-invalid="true" i tillegg, eller Field, som setter begge.

TypeScript

import { fs, type FieldState } from "@fristil/designsystem"

const felt = document.querySelector<HTMLTextAreaElement>("#begrunnelse")

felt.addEventListener("blur", () => {
  const tilstand: FieldState = felt.value.trim().length >= 20 ? "success" : "invalid"

  fs.setAttributes(felt, fs.textarea({ state: tilstand }))
})

state er samme type som i Input og Select, så verdien kan sendes mellom dem. fs.setAttributes rydder bort tilstanden fra forrige kall, så feltet ikke blir stående rødt etter at feilen er rettet.

Klasser du kan style

Klasse	Hva det er
.fs-textarea	Feltet. Tilstanden kommer fra data-state.

Variabel	Standard
--fs-textarea-min-height	calc(var(--size-4) * 5)
--fs-textarea-padding	var(--size-2) var(--size-3)
--fs-textarea-radius	var(--size-1)

--fs-textarea-min-height er en minstehøyde, ikke en fast høyde. rows og brukerens eget drag i hjørnet virker som før.

Se Tilpasning for hvordan variablene og laget virker.

Tilgjengelighet

• Hvert felt trenger en synlig <label> med for som peker på id-en.
• Har feltet en øvre grense, si det i hjelpeteksten før brukeren skriver. maxlength alene hindrer innskriving uten å forklare hvorfor.
• Bruker du en tegnteller, legg den i et element med aria-live="polite" og la den melde fra bare når grensen nærmer seg. Ellers avbryter den opplesingen for hvert tastetrykk.
• Ikke slå av resize. Det er ofte eneste måten brukeren får oversikt over lang tekst.