Textarea

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

Slik tar du den i bruk

Eksempel

Ren HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/tokens/tokens.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/textarea/textarea.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/src/components/css/label/label.css">
<!-- Eller alt i én fil: https://cdn.jsdelivr.net/npm/@fristil/designsystem@0.27.1/dist/fristil.css -->

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

TypeScript

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

fs brukes på to måter, og hvilken avhenger av om du lager elementet eller finner det.

Lager du markupen, sprer du attributtene inn. Det er veien i React, Astro og alt annet som rendrer:

import { fs } from "@fristil/designsystem/react"

<textarea {...fs.textarea({ state: "invalid" })} id="begrunnelse" rows={3} />

Importen går til /react her, siden blokka er JSX. Derfra heter nøklene className og htmlFor. I Astro og alt annet uten React importerer du @fristil/designsystem og får class og for.

Står elementet der fra før, setter du dem på det. Det er veien når du forbedrer HTML en server eller en mal har sendt:

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

const felt = document.querySelector<HTMLTextAreaElement>("#begrunnelse")
if (!felt) throw new Error("fant ikke elementet")

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.

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.

Klasser du kan style

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

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

--fs-textarea-min-height er en minstehøyde, ikke en fast høyde. rows virker som før, og brukeren kan fortsatt dra feltet høyere. Bredden er låst, siden klassen setter resize: vertical.

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.