<lm-checkbox-field> – Avkrysningsboks / Checkbox field

Om komponenten

Kanonisk navn: <lm-checkbox-field>
Synonymer: checkbox, huk av, avkryssing
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt et enkelt native <input type="checkbox">, som allerede har fullstendig, korrekt tastatur- og skjermleserstøtte - ikke et eget APG-widgetmønster (APG Checkbox dekker kun sammensatte tre-tilstands-/gruppe-varianter komponenten ikke prøver å dekke ennå).
Parts: etikett, etikett-tekst, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker et ekte <input type="checkbox"> internt uendret. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett og form-association.
Nettleserstøtte: Ingen spesielle forbehold - ElementInternals/form-associated custom elements støttes i alle moderne evergreen-nettlesere.
Design-tokens: var(--space-xs, ...), var(--radius-small, ...), var(--color-accent, ...), var(--color-feil, ...), var(--font-liten, ...), var(--opacity-disabled, ...)
Sist endret: 20. september 2026
Brukt: 1 sted

Formål

Én enkelt avkrysningsboks med boksen plassert før etikett-teksten (motsatt rekkefølge av resten av skjemafelt-familien, som er den etablerte konvensjonen for checkbokser), men samme hjelpetekst-/feilmeldingsoppsett og form-association som de andre feltene.

Egner seg for

Ett enkeltstående ja/nei-valg i et skjema som skal sendes inn (godta vilkår, huk av for nyhetsbrev).
Flere uavhengige avkrysningsvalg ved siden av hverandre (velg flere kategorier).

Egner seg ikke for

En umiddelbar av/på-innstilling utenfor et innsendingsskjema (varsler på/av) - bruk <lm-switch-field>.
Et sett med gjensidig utelukkende valg - bruk <lm-radio-group-field> eller <lm-select-field>.

Bruk

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

<lm-checkbox-field name="godtaVilkar" label="Jeg godtar vilkårene" required></lm-checkbox-field>

Prøv selv

Rediger koden under - resultatet oppdateres live.

Attributter

Attributt	Type	Standard	Beskrivelse
`label`	`string`		Attributt/property. Synlig etikett-tekst, plassert etter selve boksen.
`name`	`string`		Attributt. Skjemafelt-navn - komponenten er form-associated og deltar i FormData under dette navnet.
`value`	`string`	"on"	Attributt. Verdien sendt i FormData når boksen er haket av (samme native standardverdi som `<input type="checkbox">`).
`checked`	`boolean`	false	Attributt/property. Om boksen er haket av.
`required`	`boolean`	false	Attributt/property. Krever at boksen hakes av for å sende inn skjemaet.
`disabled`	`boolean`	false	Attributt/property. Deaktiverer feltet (arves også automatisk fra en `<fieldset disabled>`).
`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="checkbox">`-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-checkbox-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

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

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

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

lm-checkbox-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 avkrysningsboksen beholder all native tastatur- (mellomrom for å hake av/på) og skjermleserstøtte uendret. <label> omslutter både boks og tekst, slik at hele raden er klikkbar.

<label> omslutter både boks og tekst, slik at hele raden er klikkbar og fokuserbar.
Selve avkrysningsboksen beholder all native tastatur- og skjermleserstøtte uendret.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt med value (standard "on") når haket av, og er utelatt helt fra FormData når ikke haket av - identisk med native <input type="checkbox">-oppførsel.

Referanser

Se også:

../switch-field/index.html - brukes i stedet for en umiddelbar av/på-innstilling utenfor et innsendingsskjema.
../radio-group-field/index.html - brukes i stedet for gjensidig utelukkende valg.
../../../guider/skjemafelt/index.html - full oversikt over hvilken feltkomponent som dekker hvilken native input-type.

Brukes av:

okonomi/lonn/forhandlinger/index.html (forberedelses-sjekkliste per planlagt lønnsforhandling)

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