@equinor/fusion-react-stepper

@equinor/fusion-react-stepper

Stepper

Properties/Attributes

for stepper

Name	Type	Default	Description
activeStepKey	string	/	Select/change active stepp, use *** stepKey ***. required
forceOrder	boolean	false	Can't skip steps. Steps will have specific order.
verticalSteps	boolean	false	Change stepper layout to vertical. Vertical positioning of steps.
hideNavButtons	boolean	false	Show/hide next and previous navigation buttons for stepper.
onChange	(stepKey: string) => void		onChange event for active step.

for step

Name	Type	Default	Description
stepKey	string	/	Step key of step. Used for *** activeStepKey ***. required
title	string	/	Title of step
description	string	/	Description of step
disabled	boolean	false	Disable step. Can't be clicked, but can manually navigate to it

Example Usage

import { Stepper } from '@equinor/fusion-react-stepper';

<Stepper activeStepKey="step1" onChange={(e) => console.log('active: ', e)} props>
  <Step title="Title 1" stepKey="step1" props>
    Step content 1
  </Step>
  <Step title="Title 2" stepKey="step2" props>
    Step content 2
  </Step>
  <Step title="Title 3" stepKey="step3" props>
    Step content 3
  </Step>
</Stepper>