Hopp til innhold
Aksel

Komponenter

Stepper

Stepper brukes til å vise brukerens progresjon mellom steg, og eventuelt navigere mellom dem.

Egnet til:

  • Navigere eller vise brukerens progresjon mellom steg.

Uegnet til:

Eksempler

Retningslinjer

Navigering

Stepper skal ikke være eneste måte å navigere på. Du må i tillegg ha forrige- og neste-knapper eller lignende.

Som lenke eller knapp

Stepper.Step er en lenke som standard. Avhengig av hvordan applikasjonen din er satt opp, kan en button fungere bedre. Da kan du bruke as-proppen for å overskrive taggen.

jsx
<Stepper>
  <Stepper.Step as="button" onClick={() => doSPAStuff()}>Start søknad</Stepper.Step>
  <Stepper.Step as="button" onClick={() => doSPAStuff()}>Personopplysninger</Stepper.Step>
</Stepper>

Hva er forskjellen mellom Process og Stepper?

Stepper brukes når brukeren selv kan navigere mellom stegene, for eksempel i et skjema. I Stepper kan du ikke legge til interaktivt innhold, siden stegene i seg selv er klikkbare.

Process brukes når fremdriften ikke kan styres av brukeren, for eksempel for å vise gangen i en sak. I Process kan du legge til interaktivt innhold.

Tokens

Komponent-tokens ble fjernet i versjon 8

Gammel dokumentasjon for disse finner du på jsDelivr

Props

Stepper

children

  • Type:
    ReactNode
  • Description:

    <Stepper.Step /> elements.

orientation?

  • Type:
    "horizontal" | "vertical"
  • Default:
    "vertical"
  • Description:

    The direction the component grows.

activeStep

  • Type:
    number
  • Description:

    Current active step.

    Stepper index starts at 1, not 0.

onStepChange?

  • Type:
    ((step: number) => void)
  • Description:

    Callback for next activeStep.

    Stepper index starts at 1, not 0.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLOListElement>
  • Description:

    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). React Docs

interactive?

  • Deprecated:
    Use `interactive` prop on `<Stepper.Step />` instead for individual steps. For completely static steppers, use `Process` component instead.
  • Type:
    boolean
  • Default:
    true
  • Description:

    Makes stepper non-interactive if false.

Stepper.Step

children

  • Type:
    string
  • Description:

    Text content by indicator.

completed?

  • Type:
    boolean
  • Default:
    false
  • Description:

    Makes step-indicator a checkmark.

interactive?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Makes step non-interactive if false. Step will be set to a <div>, overriding as-prop.

className?

  • Type:
    string

ref?

  • Type:
    Ref<HTMLAnchorElement>
  • Description:

    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). React Docs

as?

  • Type:
    React.ElementType
  • Description:

    OverridableComponent-api

Forvalter

Team
Aksel
Artikkel oppdatert 25. august 2026
Rapporter en bug
Om du har funnet en bug eller noe som ikke henger på greip kan du gi beskjed på GitHub.
Rapporter en bug
Slack
For lavterskel deling og hjelp kan du bruke Slack-kanalen for å stille spørsmål og diskutere løsninger.
Slack