<lm-file-field> – Filopplasting / File field

Om komponenten

Kanonisk navn: <lm-file-field>
Synonymer: file upload, last opp fil, filvelger, dra og slipp
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input type="file">, som allerede gir en fullstendig, plattformtilpasset filvelger med innebygd dra-og-slipp-støtte - ikke et eget APG-widgetmønster.
Parts: etikett, etikett-tekst, felt, filliste, hjelpetekst, feilmelding
Native-first-vurdering: Bruker <input type="file"> uendret, inkludert dets native dra-og-slipp-støtte - komponenten bygger ingen egen dropzone-logikk i JS. Legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett, en synlig filliste og form-association (siden FileList ikke er en del av vanlig attributt-basert form-deltakelse for custom elements).
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements og native dra-og-slipp på <input type="file"> støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--space-small, ...), var(--border-color, ...), var(--radius-small, ...), var(--color-feil, ...), var(--font-liten, ...), var(--opacity-muted, ...)
Sist endret: 19. september 2026
Brukt: 1 sted

Formål

Filopplastingsfelt med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien, samt en synlig filliste når flere filer er valgt. Dra-og-slipp krever ingen egen JS - moderne nettlesere godtar allerede filer sluppet direkte på et <input type="file">.

Egner seg for

Opplasting av kvitteringer, CSV-import, dokumenter og bilder - både med og uten multiple.
Steder der brukeren skal kunne dra en fil fra filsystemet direkte inn i skjemaet.

Egner seg ikke for

En egen, avansert filhåndteringsopplevelse med forhåndsvisning, beskjæring eller opplastingsfremdrift per fil - dette feltet dekker kun selve filvalget.

Bruk

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

<lm-file-field name="kvittering" label="Kvittering" accept="image/*,application/pdf" required></lm-file-field>
<lm-file-field name="csv" label="CSV-fil" accept=".csv,text/csv" required></lm-file-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.
`accept`	`string`		Attributt. Videresendes direkte til det interne `<input type="file">` (f.eks. ".csv,text/csv" eller "image/*,application/pdf").
`multiple`	`boolean`	false	Attributt/property. Tillater å velge/slippe flere filer samtidig.
`capture`	`string`		Attributt. Videresendes direkte til det interne feltet - foretrekker kamera/mikrofon på mobil der relevant.
`required`	`boolean`	false	Attributt/property. Krever at minst én fil velges.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer 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 `<input type="file">`-elementet.
`filliste`	`<ul>`-en som viser navnene på valgte filer.
`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-file-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

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

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

lm-file-field::part(filliste) {
    /* egne stiler for "`<ul>`-en som viser navnene på valgte filer." */
}

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

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

Selve filvelgeren beholder all native tastatur- og skjermleserstøtte uendret. Valgte filer listes også som synlig tekst (<ul>), ikke bare i nettleserens ofte terse "n filer valgt"-sammendrag.

Selve filvelgeren beholder all native tastatur- og skjermleserstøtte uendret.
Valgte filer listes også som synlig tekst, ikke kun i nettleserens sammendrag.

Detaljer

Er form-associated: setter et enkelt File-objekt som FormData-verdi når kun én fil er valgt, eller en FormData med flere oppføringer under samme navn når multiple er satt og flere filer velges.
files-propertyen gir tilgang til den rå, native FileList-en for mer avansert bruk.

Referanser

Se også:

../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

Ingen ennå - ny komponent.

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