Stepper Index

[claudiaareneee]

Hey! Does anyone know how to change the first number/text of the stepper component?

I have this stepper:

I want the 1 to read Intro , 2 to read 1, etc. ...

Any advice on how to do that?
Thanks!
Claudia

[mayank99]

I don't think this is currently possible. You'll have to show the name underneath the number.

<Stepper
  currentStep={1}
  steps={[
    { name: 'Intro' },
    { name: 'Current' },
    { name: 'Next' },
  ]}
/>

Is there a reason you want to change the design?

[claudiaareneee]

Yeah so this is what I've got. We're using the stepper to show progress through a coding challenge:

The issue is the number miss match between what's in the circle and what's underneath. This is confusing to users

[mayank99]

would something like this work? zero-based indexing

we can support that in v3 if you're willing to upgrade

[claudiaareneee]

That would work for me. Or even just a prop to override what's in the circle. (I really want to upgrade, but it's going to take effort. We're really behind. Looking for more reasons to upgrade :) )

[mayank99]

v1/v2 will not get any new features, but we can totally support this in v3 (in the near future!)

Let us know when you're ready to upgrade and if you get stuck/need any guidance.