Hopp til innhold
Aksel

Aksel

Designsystemet
God praksisBloggen

Komponenter

FormProgress

FormProgress viser hvilket steg brukeren er på i en søknadsdialog.

StabilOppdatert 15. august 2025
GithubEndringslogg

Egnet til:

  • Søknadsdialoger

Eksempler

FormProgress.Step

<FormProgress.Step> har samme API som <Stepper.Step>. Se dokumentasjonen for Stepper for mer informasjon.

Retningslinjer

Denne komponenten er laget spesifikt for bruk i søknadsdialoger. Bruk ProgressBar hvis du har behov for å lage en mer skreddersydd framdriftsindikator.

Hvilke steg skal være med?

Introside og kvitteringsside skal ikke være med som egne steg i denne komponenten. Siste steg skal som regel være en oppsummeringsside.

Props

FormProgress

totalSteps

  • Type:
    number
  • Description:

    Total number of steps.

activeStep

  • Type:
    number
  • Description:

    Current active step.

    Index starts at 1, not 0.

open?

  • Type:
    boolean
  • Description:

    Shows Stepper if true, hides if false. Using this prop removes automatic control of open-state.

onOpenChange?

  • Type:
    ((open: boolean) => void)
  • Description:

    Callback for current open-state

children

  • Type:
    ReactNode
  • Description:

    Should contain <FormProgress.Step> elements.

onStepChange?

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

    Callback for next activeStep.

    Index starts at 1, not 0.

interactiveSteps?

  • Type:
    boolean
  • Default:
    true
  • Description:

    Makes Stepper non-interactive if false.

translations?

  • Type:
    RecursivePartial<{ step: string; showAllSteps: string; hideAllSteps: string; }>
  • Description:

    i18n API for customizing texts and labels.

className?

  • Type:
    string

ref?

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

FormProgress.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:
    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