<lm-currency-field> – Pengebeløp / Currency field

Om komponenten

Kanonisk navn: <lm-currency-field>
Synonymer: money input, valutafelt, beløpsfelt, kronefelt
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input type="text"> med tilpasset formatering - ikke et eget APG-widgetmønster, kun en formateringsatferd lagt oppå et vanlig tekstfelt.
Parts: etikett, etikett-tekst, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker <input type="text" inputmode="decimal"> for å utløse et numerisk tastatur på mobil samtidig som formatert visningstekst (med valutasymbol/tusenskille) tillates. All faktisk tallformatering skjer med innebygd Intl.NumberFormat via den delte formatCurrency-funksjonen - ingen egen formateringslogikk.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements og Intl.NumberFormat støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--border-color, ...), var(--radius-small, ...), var(--color-feil, ...), var(--font-liten, ...), var(--opacity-disabled, ...)
Sist endret: 19. september 2026
Brukt: 1 sted

Formål

Beløpsfelt bygget på type="text" (siden formatert visning som "1 234,50 kr" ikke er et gyldig native tall), som viser verdien live valutaformatert via den delte formatCurrency-funksjonen når feltet ikke har fokus, og en enkel, redigerbar rå tallverdi mens brukeren skriver.

Egner seg for

Ekte pengebeløp i okonomi-prosjektet og lignende - lønn, utgifter, formuesverdier, budsjettgrenser.

Egner seg ikke for

Enkle enhetstall som ikke er penger ("kr" som blott en etikett, prosent, antall) - bruk <lm-number-field> sin suffiks-attributt.
Presise heltallsberegninger som må unngå flyttallsavrunding i selve komponenten - komponenten leverer et JS-tall (valueAsNumber), og eventuell øre-nøyaktig regning bør gjøres i hele kroner/øre i den kallende koden.

Bruk

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

<lm-currency-field name="belop" label="Beløp" currency="NOK" value="1500" required></lm-currency-field>

const felt = document.querySelector("lm-currency-field");
const kroner = felt.valueAsNumber; // ekte tall, uten formatering

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. Rå tallverdi (uten formatering), f.eks. "1234.5". Bruk `valueAsNumber`-propertyen for et ekte tall.
`currency`	`string`	"NOK"	Attributt. Tresifret valutakode brukt av `Intl.NumberFormat` for formatert visning.
`locale`	`string`	"nb-NO"	Attributt. Locale brukt av `Intl.NumberFormat` for tusenskille/desimaltegn.
`required`	`boolean`	false	Attributt/property. Gjør feltet obligatorisk.
`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="text">`-elementet.
`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-currency-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

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

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

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

lm-currency-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>. Verdien vises formatert kun når feltet ikke har fokus, slik at skjermlesere og redigering alltid møter et enkelt, entydig tall mens brukeren skriver.

Samme <label>/aria-describedby-oppsett som <lm-text-field>.
Feltet viser alltid en enkel, uformatert tallverdi mens det har fokus, og formatert tekst kun når det ikke har fokus - unngår at skjermlesere må tolke valutasymboler midt i redigeringen.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt som en rå, uformatert tallstreng.
valueAsNumber-propertyen gir/tar imot et ekte JS-tall.
Bruker den delte formatCurrency-funksjonen fra designsystem/funksjoner/formattering/format-currency/ - ingen egen formateringslogikk i komponenten.

Referanser

Se også:

../number-field/index.html - brukes i stedet for enkle enhetstall som ikke er penger.
../../../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, designsystem/funksjoner/formattering/format-currency/