Intro
Stepper kan brukes for å indikere hvor brukeren er i en prosess. Kan brukes om navigasjons mønster mellom steg, eller for en visuell guide på progresjon. Selve komponenten bør være et supplement til andre mønstre eller indikatorer, og bør ikke være eneste måte å navigere en løsning på.
Egnet til:
- Vise brukeren hvor langt de har kommet i en brukerreise
- Spørreundersøkelser
- Søknadsprosess med flere steg
Uegnet til:
- Eneste måte å navigere på
Eksempler
Vi anbefaler å ikke bruke horisontal stepper, spesielt på eksterne flater. Dette er for å bedre støtte mobilenheter.
Med hjelp av interactive og completed kan man bygge opp wizard-lignende løsninger.
Varianter
Vertikal/horisontal
Komponenten kan orienteres horisontalt eller vertikalt ettersom hvordan siden er bygd opp. Vi anbefaler sterkt å bruke vertikal variant da den passer bedre på mindre flater, eks på mobil.
Interactive
Man kan sette hele stepper til å ikke være interaktiv, eller steg for seg selv. Dette gir muligheten til å bygge opp en wizard-lignende flyt der fremtidige steg kan være "låst", mens tidligere steg er interaktive.
Completed
Alle steg har en prop completed som setter et checkmark der det tidligere var et tall. Dette kan brukes for å visuelt lettere la brukeren se hvilken steg de har fullført, og da hvilken de bør fullføre. Dette bør bare brukes som en visuell støtte-indikator.
Retningslinjer
Som lenke eller knapp
Stepper.Step er default en a-tag og brukes som lenke. Men basert på hvordan applikasjonen din er satt opp, eks typisk SPA kan en knapp funke bedre. Da kan man bruke as-proppen på steget for å overskrive taggen.
activeStep og onStepChange
Vi har valgt å 1-indeksere denne komponenten. Det vil si at activeStep forventer at første step er 1, og onStepChange vil returnere 1 når aktivert. Dette følger samme prinsipp som Pagination der stegene man ser visuelt er de samme man jobber med i kode. Dette aviker litt fra hvordan gamle StepIndicator/Stegindikator fungerte, så greit å dobbelsjekke koden når man migrerer.
Props
Stepper
- children ReactNode
- <Stepper.Step /> elements
- orientation?"horizontal" | "vertical"
- The direction the component grows.
- activeStep number
- Current active step. @note Stepper index starts at 1, not 0
- onStepChange? ((step: number) => void)
- Callback for next activeStep @note Stepper index starts at 1, not 0
- interactive?boolean
- Makes stepper non-interactive if false
- className? string
- ref? Ref<HTMLOListElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Stepper extends HTMLOListElement
Stepper.Step
- children string
- Text content by indicator
- completed?boolean
- Makes step-indicator a checkmark
- interactive?boolean
- Makes step non-interactive if false. Step will be set to a <div>, overriding `as`-prop
- className? string
- ref? Ref<HTMLAnchorElement>
- Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom
- Stepper.Step extends HTMLAnchorElement