Stabil

Textarea

Textarea er et flerlinjers tekstfelt som matcher Input-komponenten i stil. Brukes for lengre tekster som kommentarer, beskrivelser og meldinger. Støtter innebygd label og error på samme måte som Input, og kobles automatisk til FormField.

Utforsk

Forhåndsvisning

placeholder

disabled

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

Importering

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

Grunnleggende bruk

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

Med label

<div style={{ maxWidth: "24rem" }}>
<Textarea label="Melding" placeholder="Skriv meldingen din her..." />
</div>

Med feilmelding

<div style={{ maxWidth: "24rem" }}>
<Textarea label="Melding" error="Meldingen kan ikke være tom" required />
</div>

Med tilpasset høyde

Bruk rows for å styre antall synlige linjer.

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

Med knapp

<div style={{ display: "grid", gap: "0.75rem", maxWidth: "24rem" }}>
<Textarea label="Kommentar" 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

Bruk label-propen, eller plasser Textarea i en FormField med <Label>, så kobles label automatisk
error-propen setter aria-invalid og kobler feilmelding via aria-describedby
Tydelig fokusindikator (outline) som også vises i høykontrastmodus
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
`label`	`ReactNode`	—	Synlig label over feltet
`error`	`ReactNode`	—	Feilmelding under feltet
`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