<lm-number-field> – Tallfelt / Number field

Om komponenten

Kanonisk navn: <lm-number-field>
Synonymer: tallinput, beløpsfelt, number input, numeric field
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input type="number"> (APG Spinbutton er allerede fullt dekket av selve input-typen) - komponenten legger bare til etikett/hjelpetekst/suffiks-krom, ikke et eget widgetmønster.
Parts: etikett, etikett-tekst, felt, suffiks, hjelpetekst, feilmelding
Native-first-vurdering: Bruker et ekte <input type="number"> internt, som allerede gir stegning med piltaster, native min/max/step-validering og riktig numerisk mobiltastatur. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett og en valgfri visuell enhetstekst.
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, ...), var(--space-2xs, ...)
Sist endret: 19. september 2026
Brukt: 1 sted

Formål

Tallfelt med min/max/step-validering og en valgfri enhetstekst (kr, %, stk) rett ved siden av verdien, med samme etikett-/hjelpetekst-/feilmeldingsoppsett som resten av skjemafelt-familien.

Egner seg for

Beløp, mengder, varighet og andre numeriske verdier med naturlige grenser (min/max) eller steg (step).
Felt der en kort enhet (kr, %, stk, år) bør vises rett ved siden av tallet uten å være en del av selve verdien.

Egner seg ikke for

Rene pengebeløp som skal formateres med tusenskille mens brukeren skriver - bruk <lm-currency-field>.
Verdier valgt via et intervall/glidebryter i stedet for tastet inn - bruk <lm-range-field>.
Fritekst som tilfeldigvis inneholder tall (telefonnummer, postnummer) - bruk <lm-text-field type="tel">.

Bruk

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

<lm-number-field name="belop" label="Beløp" suffiks="kr" min="0" step="1" required></lm-number-field>
<lm-number-field name="rente" label="Rente" suffiks="%" min="0" step="0.01"></lm-number-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 verdi som streng - bruk `valueAsNumber`-propertyen for et ekte tall.
`suffiks`	`string`		Attributt/property. Kort enhetstekst vist til høyre for feltet (f.eks. "kr", "%", "stk") - kun visuell, påvirker ikke selve verdien.
`min`	`number`		Attributt. Videresendes til det interne `<input type="number">`.
`max`	`number`		Attributt. Videresendes til det interne feltet.
`step`	`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 `<input type="number">`-elementet.
`suffiks`	`<span>`-en med enhetsteksten.
`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-number-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

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

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

lm-number-field::part(suffiks) {
    /* egne stiler for "`<span>`-en med enhetsteksten." */
}

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

lm-number-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> - se dens tilgjengelighet-felt for detaljer. Enhetsteksten (suffiks) er kun visuell og ikke lest opp separat av skjermlesere utover selve tegnene; skriv derfor gjerne en fullstendig label (f.eks. "Beløp i kroner") i stedet for å stole på at suffiks alene formidler enheten.

Samme <label>/aria-describedby-oppsett som <lm-text-field>.
Native <input type="number"> gir piltast-stegning og numerisk mobiltastatur uten egen JS.
Enhetsteksten er visuell - skriv en fullstendig label som inkluderer enheten når den er viktig for forståelsen.

Detaljer

Er form-associated og deltar i FormData som streng under sitt name-attributt; bruk valueAsNumber-propertyen fra JS for et ekte tall (unngår manuell Number(...)-konvertering hver gang).

Referanser

Se også:

../text-field/index.html - samme oppsett for fritekst i stedet for tall.
../currency-field/index.html - brukes i stedet når beløpet skal vises med tusenskille mens brukeren skriver.
../../../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