reactjsmaterial-uistepper

Is it possible to change material UI steps when clicked on stepper icons?

I am using material UI stepper, I want to go to certain step when I click on icons of stepper. Lets say if I have total of 5 steps and if I am on fourth step and when I click on icon of step 1, I can go back to step one. Same should be for step two and three, if I click on stepper icons I should be able to go back to those steps respectively.

These are what I am calling stepper icons (marked with red boxes): enter image description here

Here is codesandbox: https://codesandbox.io/s/currying-fire-wvyqzs?file=/demo.tsx

Solution

  • Provide onClick callback to <Step/> which sets active step.

    <Step onClick={() => setActiveStep(i)} />