@equinor/fusion-react-stepper

Stepper

Properties/Attributes

for stepper

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.

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

Uncontrolled usage

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

<Stepper initialStepKey="step1" onChange={(e, k) => console.log('active: ', e, ' keys: ', k)} 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>

Controlled usage

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

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

return (
    <Stepper stepKey={activeStep} onChange={onChangeStep} 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>
);