<lm-textarea-field> – Flerlinjes tekstfelt / Textarea field

Om komponenten

Kanonisk navn: <lm-textarea-field>
Synonymer: tekstområde, notatfelt, textarea, multiline text
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <textarea>, som allerede er det korrekte, fullstendige mønsteret for flerlinjes tekst - ikke et eget APG-widgetmønster.
Parts: etikett, etikett-tekst, felt, tegnteller, hjelpetekst, feilmelding
Native-first-vurdering: Bruker et ekte <textarea> internt, inkludert nettleserens innebygde resize: vertical-håndtak. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett, form-association og en tegnteller.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--border-color, ...), var(--radius-small, ...), var(--opacity-muted, ...), var(--opacity-disabled, ...), var(--color-feil, ...), var(--font-liten, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Flerlinjes tekstfelt for notater/beskrivelser, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien, pluss en automatisk tegnteller når maxlength er satt.

Egner seg for

Notater, beskrivelser og annen flerlinjes fritekst.
Felt med en tegngrense der brukeren bør se hvor mye plass som er igjen mens de skriver.

Egner seg ikke for

Enkeltlinjes tekst som navn, e-post eller søk - bruk <lm-text-field>.
Rikt formatert tekst (fet/kursiv/lister) - denne komponenten er bevisst ren, uformatert tekst.

Bruk

<script type="module" src="/designsystem/komponenter/skjema/textarea-field/textarea-field.js"></script>

<lm-textarea-field name="notater" label="Notater" rows="2" maxlength="280" help="Valgfritt - vises på oversikten."></lm-textarea-field>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett-tekst.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`value`	`string`	""	Attributt/property. Feltets gjeldende tekst.
`rows`	`number`	3	Attributt. Antall synlige tekstlinjer - feltet kan fortsatt endres i høyden manuelt (`resize: vertical`).
`maxlength`	`number`		Attributt. Videresendes til det interne `<textarea>` og viser automatisk en "n/maks tegn"-tegnteller under feltet.
`minlength`	`number`		Attributt. Videresendes til det interne feltet.
`placeholder`	`string`		Attributt. Videresendes til det interne feltet.
`required`	`boolean`	false	Attributt/property. Gjør feltet obligatorisk og legger til en stjerne i etiketten.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer feltet (arves også automatisk fra en `<fieldset disabled>`).
`readonly`	`boolean`	false	Attributt. Videresendes til det interne feltet.
`help`	`string`		Attributt. Kort hjelpetekst vist under feltet, koblet via `aria-describedby`.

Parts

Part	Beskrivelse
`etikett`	Det omsluttende `<label>`-elementet.
`etikett-tekst`	`<span>`-en med selve etikett-teksten.
`felt`	Det interne `<textarea>`-elementet.
`tegnteller`	`<small>`-elementet med "n/maks tegn"-teksten.
`hjelpetekst`	`<small>`-elementet med hjelpeteksten.
`feilmelding`	`<small role="alert">`-elementet med valideringsmeldingen.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-textarea-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

lm-textarea-field::part(etikett-tekst) {
    /* egne stiler for "`<span>`-en med selve etikett-teksten." */
}

lm-textarea-field::part(felt) {
    /* egne stiler for "Det interne `<textarea>`-elementet." */
}

lm-textarea-field::part(tegnteller) {
    /* egne stiler for "`<small>`-elementet med "n/maks tegn"-teksten." */
}

lm-textarea-field::part(hjelpetekst) {
    /* egne stiler for "`<small>`-elementet med hjelpeteksten." */
}

lm-textarea-field::part(feilmelding) {
    /* egne stiler for "`<small role="alert">`-elementet med valideringsmeldingen." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`checkValidity()`	-		Videresender til den interne `ElementInternals.checkValidity()`.
`reportValidity()`	-		Videresender til den interne `ElementInternals.reportValidity()`.

Tilgjengelighet

Samme etikett-/hjelpetekst-/feilmeldingsoppsett som <lm-text-field>. Tegntelleren er en ren visuell/tekstlig indikator (ikke en egen aria-live-region) siden den oppdateres på hvert tastetrykk og ville vært svært støyende i en skjermleser hvis den ble annonsert live - den vises likevel for seende brukere ved siden av feltet.

Samme <label>/aria-describedby-oppsett som <lm-text-field>.
Tegntelleren er ren tekst, ikke en aria-live-region, for å unngå støyende oppdateringer på hvert tastetrykk.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt.
rows styrer kun starthøyden - feltet kan fortsatt dras høyere/lavere manuelt (resize: vertical).

Referanser

Se også:

../text-field/index.html - samme oppsett for enkeltlinjes tekst.
../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

okonomi/lonn/forhandlinger/index.html (argumenter/prestasjoner - ett per linje)

Avhengigheter: designsystem/komponenter/skjema/skjema-felt-delt.css, designsystem/komponenter/skjema/skjema-felt-delt.js