Hopp til innhold
Aksel
  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Bloggen

Meny

  • God praksis
  • Grunnleggende
  • Ikoner
  • Komponenter
  • Mønster & Maler
  • Blogg
  • komponenter
      • Page
      • HGrid
      • HStack
      • VStack
      • Box
      • Hide
      • Show
      • Bleed
      • Eksperimenter 🧪
      • Accordion
      • ActionMenuBeta
      • Alert
      • Button
      • Chat
      • Checkbox
      • Chips
      • ComboboxBeta
      • CopyButton
      • DatePicker
      • Dropdown
      • ErrorSummary
      • ExpansionCard
      • FileUpload
      • FormProgressNy
      • FormSummaryNy
      • GuidePanel
      • HelpText
      • InternalHeader
      • Link
      • List
      • Loader
      • Modal
      • MonthPicker
      • Navpoleonskake
      • Pagination
      • Popover
      • ProgressBar
      • Provider
      • Radio
      • ReadMore
      • Search
      • Select
      • Skeleton
      • Stepper
      • Switch
      • Table
      • Tabs
      • Tag
      • Textarea
      • TextField
      • Timeline
      • ToggleGroup
      • Tooltip
      • Typography
      • ConfirmationPanelAvviklet
      • LinkPanelAvviklet
      • PanelAvviklet

FormProgress

Oppdatert 9. mai 2025Ny
GithubYarnEndringslogg

Innhold på siden

  • Intro
  • Eksempler
    • FormProgress.Step
  • Retningslinjer
    • Hvilke steg skal være med?
  • Props
    • FormProgress
    • FormProgress.Step

Ny

Denne komponenten er ny eller oppdatert. Tar du den i bruk ønsker vi gjerne innspill til hvordan den fungerer i tjenesten din!

Send innspill

Intro

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

Egnet til:

  • Søknadsdialoger

Eksempler

SandboxSandbox
Åpne eksempel i nytt vindu

Hvis hvert steg har sin egen URL, kan du bruke href på FormProgress.Step i stedet for onStepChange.

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:

activeStep

  • Type:
    number
  • Description:

open?

  • Type:
    boolean
  • Description:

onOpenChange?

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

children

  • Type:
    ReactNode
  • Description:

onStepChange?

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

interactiveSteps?

  • Type:
    boolean
  • Default:
    true
  • Description:

translations?

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

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLDivElement>
  • Description:

FormProgress.Step

children

  • Type:
    string
  • Description:

completed?

  • Type:
    boolean
  • Default:
    false
  • Description:

interactive?

  • Type:
    boolean
  • Default:
    true
  • Description:

className?

  • Type:
    string

ref?

  • Type:
    LegacyRef<HTMLAnchorElement>
  • Description:

Relaterte komponenter

  • ProgressBar thumbnail
    ProgressBar
  • Stepper thumbnail
    Stepper

© 2025 Nav

Arbeids- og velferdsetaten

Snarveier

  • Skriv for Aksel
  • Prinsipper for brukeropplevelse
  • Security Playbook
  • Etterlevelse

Om nettstedet

  • Hva er Aksel?
  • Personvernerklæring
  • Tilgjengelighetserklæring

Finn oss

  • Figma
  • Github
  • Slack