Textarea

Kildekode på GitHub · Les som Markdown

Textarea er et flerlinjers tekstfelt som matcher Input-komponenten i stil. Brukes for lengre tekster som kommentarer, beskrivelser og meldinger.

Utforsk

placeholder

disabled

<Textarea placeholder="Skriv en melding..." />

Importering

import { Textarea } from "@kilden/designsystem";

Grunnleggende bruk

<Textarea placeholder="Skriv en melding..." />

Med label

<div style={{ display: "grid", gap: "0.5rem", maxWidth: "24rem" }}>
<Label htmlFor="message">Melding</Label>
<Textarea id="message" placeholder="Skriv meldingen din her..." />
</div>

Med tilpasset høyde

Bruk rows for å styre antall synlige linjer.

<div style={{ display: "grid", gap: "1.5rem", maxWidth: "24rem" }}>
<div style={{ display: "grid", gap: "0.25rem" }}>
  <Label htmlFor="short">Kort (2 rader)</Label>
  <Textarea id="short" rows={2} placeholder="Kort tekst..." />
</div>
<div style={{ display: "grid", gap: "0.25rem" }}>
  <Label htmlFor="long">Lang (6 rader)</Label>
  <Textarea id="long" rows={6} placeholder="Lengre tekst..." />
</div>
</div>

Med knapp

<div style={{ display: "grid", gap: "0.75rem", maxWidth: "24rem" }}>
<Label htmlFor="comment">Kommentar</Label>
<Textarea id="comment" placeholder="Legg til en kommentar..." />
<div style={{ display: "flex", justifyContent: "flex-end" }}>
  <Button>Send</Button>
</div>
</div>

Deaktivert

<Textarea placeholder="Kan ikke redigeres" disabled />

Bruksanbefalinger

Beskrivelse

Bruk for flerlinjers tekst

Textarea egner seg for kommentarer, beskrivelser, meldinger og annet innhold som typisk er mer enn én linje.

E-post

Ikke bruk for korte input

For enkeltlinjer som navn, e-post eller telefon, bruk Input i stedet. Textarea tar unødvendig plass for kort tekst.

Tilgjengelighet

Koble alltid til en <Label> med id/htmlFor
Bruk aria-describedby for hjelpetekst eller feilmeldinger
Tydelig fokusindikator med focus-visible:ring-2
Disabled-tilstand kommuniseres via HTML disabled-attributtet
Brukere kan endre størrelse med resize-håndtaket i nettleseren

Props

Textarea arver alle props fra <textarea>. De mest relevante:

Prop	Type	Default	Beskrivelse
`placeholder`	`string`	—	Plassholdertekst
`rows`	`number`	—	Antall synlige linjer
`disabled`	`boolean`	`false`	Deaktiver feltet
`required`	`boolean`	`false`	Marker som påkrevd
`name`	`string`	—	Navn for skjemainnsending
`value`	`string`	—	Kontrollert verdi
`onChange`	`(e: ChangeEvent) => void`	—	Kalles ved endring