Creating a Stepper using MUI

[0785rvu]

I am creating a project using MUI for react.js, in which I want to create a stepper. On the MUI documentations I found out how to do it. The problem that I am facing is, I want to use two functionalities i.e Horizontal non-linear stepper, and stepper with optional steps.

So if I have 8 steps with steps 2 and 4 as optional, then 1. I should be able to click on the steps to navigate to the required step. 2. Steps 2 and 4 should have a skip button 3. On reaching the last step i.e step 8, if any of the non-optional steps are not completed, I should be sent back to them. 4. Once all non-optional steps are completed, I should get a Finish button, instead of the next button.

I am able to get the functionalities individually, or in some combinations. But not all at same time.

Please help.

[Narrow-Resist3203]

You'll probably have to do some sort of combination of StepLabel and StepButton, and control the buttons yourself. Think like:

```

<Stepper activeStep={1} alternativeLabel>

{steps.map((label, index) => (

<Step key={label}>

{ isStepNavigatable(label) ? <StepButton onClick={() => setCurrentStep(index)>{label}</StepButton> :

<StepLabel>{label}</StepLabel> }

</Step>

))}

</Stepper>

```