Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

Stepper

Stepper brukes til å navigere mellom steg og/eller vise brukerens progresjon mellom steg.

StabilOppdatert 26. august 2025
Github FigmaEndringslogg

Egnet til:

  • Navigere eller vise brukerens progresjon mellom steg, f.eks. i et søknadsskjema.

Uegnet til:

  • Eneste måte å navigere på.
  • Søknadsdialog (bruk FormProgress).
  • Vise en statisk prosess (bruk Process).

Eksempler

Retningslinjer

Som lenke eller knapp

Stepper.Step er default en a-tag og brukes som lenke. Basert på hvordan applikasjonen din er satt opp, kan en button funke bedre. Da kan man bruke as-proppen på steget 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.

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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

data-color?

  • Type:
    (string & {}) | AkselColor

ref?

  • Type:
    LegacyRef<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

Tokens

Deprecation warning: I det nye systemet for theming og darkmode, er komponent-tokens fjernet. Les mer om det nye themingsystemet.

TokenFallback
--ac-stepper-text--a-surface-action
--ac-stepper-line--a-border-default
--ac-stepper-line-completed--a-border-selected
--ac-stepper-non-interactive--a-text-subtle
--ac-stepper-active--a-text-action-selected
--ac-stepper-active-bg--a-surface-action-selected
--ac-stepper-active-border--a-border-action-selected
--ac-stepper-active-text--a-text-on-action
--ac-stepper-hover-active--a-text-action-hover
--ac-stepper-hover-bg--a-surface-action-subtle-hover
--ac-stepper-non-interactive-completed-bg--a-surface-subtle
--ac-stepper-non-interactive-line-completed--a-border-strong
--ac-stepper-non-interactive-active--a-text-default
--ac-stepper-non-interactive-active-bg--a-surface-inverted
--ac-stepper-non-interactive-active-border--a-surface-inverted
--ac-stepper-non-interactive-active-text--a-text-on-inverted
--ac-stepper-active-completed--a-text-action-selected
--ac-stepper-non-interactive-active-completed--a-text-default