@equinor/fusion-react-stepper


Stepper

Properties/Attributes

$3

Name | Type | Default | Description
------------------------- |-------------------------------| ----------------------------- | -----------
initialStepKey | string / undefined | / | Sets the initial step key for an uncontrolled stepper component. If undefined the stepper will use the first step as initial step.
stepKey | string / undefined | / | Used for making the stepper a controlled component. If it is set then it is the property that decides the currentStep and initialStepKey is ignored.
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, allSteps: StepKey[]) => void | | onChange event for active step.

$3

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

$3

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

console.log('active: ', e, ' keys: ', k)} props>

Step content 1


Step content 2


Step content 3


`

$3

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

const [activeStep, setActiveStep] = useState('step1');
const onChangeStep = (stepKey: string, allSteps: StepKey[]) => {
console.log('active: ', stepKey, ' keys: ', allSteps)
if (activeStep !== stepKey) {
setActiveStep(String(stepKey));
}
};

return (


Step content 1


Step content 2


Step content 3


);
``