<lm-multistep-form> – Flerstegsskjema / Multistep form

Om komponenten

Kanonisk navn: <lm-multistep-form>
Synonymer: stegvis skjema, wizard, stepper form, multistep form, guided form
Kategori: skjema, navigasjon
ARIA-mønster: Ikke aktuelt - Sekvensielt skjema bygget av native <form> og <fieldset>, men uten et dekkende APG-mønster for hele wizard-flyten.
Parts: status
Native-first-vurdering: Komponenten bygger på native <form>, <fieldset> og constraint validation via reportValidity(). Det finnes ikke et innebygd HTML-element for flertrinnsskjema, så steglogikken blir liggende i komponenten.
Nettleserstøtte: Bygger på native reportValidity() på steg-containeren når steget er et <fieldset>. Brukes andre containere enn elementer med reportValidity(), får man fortsatt stegflyt, men ikke den automatiske valideringsblokkeringen før neste steg.
Sist endret: 20. september 2026
Brukt: 2 steder

Formål

Deler et vanlig <form> opp i sekvensielle steg med "Neste" og "Tilbake", enkel stegindikator og native constraint validation per steg.

Egner seg for

Lineære skjemaer delt i få steg med "Neste" og "Tilbake" og native validering per steg.
Dialogskjemaer der Enter skal gå videre til neste steg i stedet for å sende inn for tidlig.

Egner seg ikke for

Forgrenede wizarder eller stegflyt som hopper dynamisk basert på valg; komponenten bruker DOM-rekkefølgen som fasit.
Automatisk validering av stegcontainere som ikke er <fieldset>; reportValidity() kalles bare der verten faktisk støtter det.

Bruk

<script type="module" src="/designsystem/komponenter/skjema/multistep-form/multistep-form.js"></script>

<lm-multistep-form>
    <form id="mitt-skjema">
        <fieldset data-step="1">
            <legend>Steg 1</legend>
            <label><span>Navn</span><input type="text" name="navn" required></label>
            <button type="button" data-step-next>Neste</button>
        </fieldset>
        <fieldset data-step="2" hidden>
            <legend>Steg 2</legend>
            <label><span>E-post</span><input type="email" name="epost" required></label>
            <button type="button" data-step-back>Tilbake</button>
            <button type="submit">Send inn</button>
        </fieldset>
    </form>
</lm-multistep-form>

const wizard = document.querySelector("lm-multistep-form");
wizard.addEventListener("multistep-form:change", (e) => {
    console.log(e.detail.index, e.detail.total, e.detail.step);
});

Prøv selv

Rediger koden under - resultatet oppdateres live.

Events

Event	Type	Beskrivelse
`multistep-form:change`	`CustomEvent<{index: number, total: number, step: HTMLElement}>`	Hver gang gjeldende steg endres (frem, tilbake, goToStep, reset).

Slots

Slot	Beskrivelse
(standard)	Selve <form>-et med [data-step]-elementer.

Parts

Part	Beskrivelse
`status`	Innebygd statusmelding for stegindikatoren.

Styling med ::part()

Hver part over kan restyles direkte fra et vanlig, ytre stilark - uten å måtte endre selve komponenten eller duplisere den:

lm-multistep-form::part(status) {
    /* egne stiler for "Innebygd statusmelding for stegindikatoren." */
}

Metoder

Metode	Parametre	Returverdi	Beskrivelse
`goToStep(index)`	`index`: `number` - 0-basert stegindeks.		Hopp direkte til steg index (0-basert), uten validering.
`reset()`	-		Nullstill til steg 1.

Tilgjengelighet

Komponenten setter ingen egne aria-*-attributter, men den interne <lm-inline-message>-statuslinjen annonserer Steg N av M via role="status" og aria-live. Enter i tekstfelt går videre til neste steg, mens textarea er unntatt. Ved stegskifte skjules øvrige steg med hidden, og fokus flyttes til første interaktive felt i det nye steget.

Den interne <lm-inline-message>-statuslinjen annonserer Steg N av M via role="status" og aria-live.
Enter i tekstfelt går videre til neste steg så lenge brukeren ikke står på siste steg; textarea er unntatt.
Ved stegskifte settes øvrige steg til hidden, og fokus flyttes til første interaktive felt i det nye steget.
Komponenten har ingen egen animasjon; egen CSS tilfører bare litt toppmargin på statuslinjen.

Detaljer

Merk steg med data-step på et element i lys-DOM. Bruk helst <fieldset> for gratis validering av akkurat det steget via fieldset.reportValidity().
Naviger med knapper som har data-step-next eller data-step-back, og bruk type="button" på disse.
Siste steg skal inneholde den faktiske <button type="submit">, så vanlig skjema-innsending fortsatt fungerer.
Enter i tekstfelt går til neste steg i stedet for å sende inn skjemaet for tidlig, unntatt på siste steg.
Komponenten legger ikke selv til avbryt- eller lukkeknapper; det er opp til forbrukeren.

Referanser

Se også:

../../../funksjoner/dom/koble-datalist-sok/index.html - Passer godt i et steg der brukeren skal søke og velge et reelt treff (f.eks. et sted), med samme native reportValidity()-flyt før neste steg.
../../tilbakemelding/inline-message/index.html - Brukes internt for stegindikatoren og er relevant når man vil forstå hvordan statuslinjen annonseres.

Brukes av:

turer/trip.html - "Legg til stopp"-dialogen (sted → tid/tidsestimat → notater/tidssone).
turer/index.html - "Ny tur"-dialogen (navn → periode → bilde).

Avhengigheter: designsystem/komponenter/tilbakemelding/inline-message/inline-message.js - steg-tellerteksten ("Steg N av M") bruker den delte, rotnivå-komponenten <lm-inline-message>.