<lm-switch-field> – Av/på-bryter / Switch field

Om komponenten

Kanonisk navn: <lm-switch-field>
Synonymer: switch, toggle, bryter, på/av
Kategori: skjema
ARIA-mønster: Ikke aktuelt - Wrapper rundt native <input type="checkbox" switch>, som nettleseren selv gir rollen switch og full tastatur-/skjermleserstøtte for (APG Switch-mønsteret er dermed allerede dekket av native HTML, uten egen ARIA-håndtering i komponenten).
Parts: etikett, etikett-tekst, felt, hjelpetekst, feilmelding
Native-first-vurdering: Bruker det ferske native switch-attributtet fremfor en håndbygget glidebryter i CSS/JS - i tråd med kravet om kun å støtte nyeste Chrome/Safari. Komponenten legger kun til konsistent etikett-/hjelpetekst-/feilmeldingsoppsett og form-association.
Nettleserstøtte: Krever <input type="checkbox" switch>, støttet i nyeste Chrome og Safari (i tråd med repoets krav om kun å støtte disse) - eldre nettlesere viser en vanlig avkrysningsboks som fallback (native HTML-degradering, ingen egen kode nødvendig).
Design-tokens: var(--space-xs, ...), var(--color-accent, ...), var(--color-feil, ...), var(--font-liten, ...), var(--opacity-disabled, ...)
Sist endret: 19. september 2026
Brukt: 1 sted

Formål

En umiddelbar av/på-bryter bygget på det native switch-attributtet på <input type="checkbox"> (nyeste Chrome/Safari), med samme hjelpetekst-/feilmeldingsoppsett og form-association som resten av skjemafelt-familien - helt uten en håndbygget, egendefinert glidebryter i JS/CSS.

Egner seg for

Umiddelbare av/på-innstillinger som normalt trer i kraft med én gang (varsler på/av, mørk modus, tilgjengelighetsvalg).
Steder der en visuell bryter er en tydeligere signal enn en avkrysningsboks for at valget er binært og umiddelbart.

Egner seg ikke for

Et valg som først trer i kraft ved innsending av et skjema (godta vilkår, avkryssing i en bestillingsflyt) - bruk <lm-checkbox-field>, som er den etablerte konvensjonen for den situasjonen.
Et sett med gjensidig utelukkende valg - bruk <lm-radio-group-field>.

Bruk

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

<lm-switch-field name="varsler" label="Varsler" checked></lm-switch-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 bryteren.
`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 bryteren er på.
`checked`	`boolean`	false	Attributt/property. Om bryteren er på.
`required`	`boolean`	false	Attributt/property. Krever at bryteren er på for å sende inn skjemaet.
`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="checkbox" switch>`-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-switch-field::part(etikett) {
    /* egne stiler for "Det omsluttende `<label>`-elementet." */
}

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

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

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

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

Nettleseren gir automatisk role="switch" og riktig aria-checked-tilstand til det interne elementet - komponenten setter ingen egne ARIA-attributter på det.

Nettleseren gir automatisk role="switch" og riktig aria-checked-tilstand.
<label> omslutter både bryter og tekst, slik at hele raden er klikkbar.

Detaljer

Er form-associated og deltar i FormData under sitt name-attributt med value (standard "on") når på, og er utelatt helt fra FormData når av - samme mønster som <lm-checkbox-field>.

Referanser

Se også:

../checkbox-field/index.html - brukes i stedet for et valg som først trer i kraft ved innsending av et skjema.
../../../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