#StepIndicator

#Import

import { StepIndicator } from '@dnb/eufemia'

#Description

The step indicator (progress indicator) is a visual representation of a user's progress through a set of steps or series of actions. Their purpose is to both guide the user through the process and to help them create a mental model of the amount of time and effort that is required to fulfill the process.

#Relevant links

• Figma
• Source code
• Docs code

If the user should be able to navigate back and forth, use the mode="loose" property. More about the modes further down.

The current active step is set with the currentStep property or within the data with the isCurrent object property.

NB: Whenever possible, ensure you bind the currentStep to the browsers path location. See the example below or the example on CodeSandbox.

#Modes

The mode property is mandatory. It tells the component how it should behave.

• strict
• loose
• static

#Strict mode

Use strict for a chronological step order.

The user can navigate between the visited steps and the current step. The component keeps track of these reached steps.

#Loose mode

Use loose if the user should be able to navigate freely between all steps. Also, those which are not visited before.

#Static mode

Use static for non-interactive steps.

#Modify a step

You can easily modify a step – e.g. should one step not be interactive, you can use the inactive property on that step:

const steps = [
  { title: 'Active' },
  { title: 'Not active', inactive: true },
]

More details about modifying steps in the properties panel.