Egnet til:

• å dele et skjema opp i porsjoner.
• å vise en veiviser som ender opp i en konklusjon.

Uegnet til:

• veldig små skjemaer. 
• å dele tekstsider inn i seksjoner. 

Teknisk dokumentasjon

Se StepList i Storybook for tekniske detaljer.

Hvordan bruke komponenten:

Sett deg først inn i retningslinjer for å lage skjema for å få en forståelse av hvordan skjema bygges opp. 

Oppsummering før innsending

Hovedregelen at du har med et oppsummeringssteg fordi brukeren skal ha mulighet til å se over skjemaet før innsending. Oppsummeringssteget skal være et eget steg og teksten på knappen endrer seg fra «Neste» til «Send inn» eller tilsvarende. Den gule oppsummeringsboksen vist i eksemplet er ikke en del av komponenten, men kan lages med en div-boks og validering hvis du bruker sjekkboks. 

Hvis et skjema skal sendes videre til noen andre for signering, heter knappen på siste steg «Send videre til signering». Hvis bruker selv sender det inn til oss heter knappen «Send inn» eller for eksempel «Bestill attest».

Her kan du eventuelt også ha med mulighet for at brukeren godkjenner opplysningene.

Stegliste med oppsummering før innsending: 

Kvittering og bekreftelse

Etter oppsummeringssteget kommer bruker til en ny side som er en kvittering/bekreftelse på at skjema er sendt inn. Bekreftelsen skal inneholde:

• Klar beskjed om at bruker har sendt det inn eller videre til signering, avhengig av skjemaflyt.
• ​​​​​​​Dato og tidspunkt for innsending
• Eventuell forventet behandlingstid og hvor bruker får svar
• Hvor bruker finner igjen skjemaet
• Opplysningene som ble sendt inn (ligger i en åpne/lukke)

Varsel av brukerfeil når brukeren klikker «neste»

Når et steg inneholder feil, plasserer vi oppsummering av feilen i en ErrorSummary i bunnen av steget. Denne dukker opp når bruker klikker «Neste» eller «Send inn». 

Steg med oppsummering av feil (ErrorSummary): 

Brukeren skal kunne hoppe opp og ned i steglisten

I noen tilfeller kan en bruker starte midt i en stegliste. Et eksempel er dersom brukeren allerede har fylt inn opplysninger i en veiviser på skatteetaten.no, og deretter blir sendt til en innlogget tjeneste. Da skal opplysningene som allerede er registrert, nå være forhåndsutfylt i den innloggede tjenesten.

Hvis brukeren gjør en endring i et tidlig steg og det ikke er avhengigheter, husker skjemaet det som er skrevet inn på senere steg. Hvis det derimot er avhengigheter mellom stegene, blir senere steg nullstilt.

Universell utforming  

• Når du velger neste-knappen skal tastaturfokus settes til toppen av det nye steget. Dersom neste-steget får en id="eksempel-id" så vil steget automatisk sette en id "eksempel-id-focus-target" til elementet som må få fokus. Fokushåndtering på «endre»-knappen håndteres automatisk av komponenten.