Issue with Stepper: Marking Step as "Completed" based on form, not based on active number #6867
-
I am using the
Thank you for your assistance and suggestions! |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
You can use something like this: function getColorForStep(i: number) {
// steps is where you keep the state of your current stepped form
// in this example we have 3 states: 1. unfinished 2. error 3. finished
if (steps[i] === 'unfinished') return 'dimmed'
if (steps[i] === 'error') return 'red'
return 'blue'
}
<Stepper.Step
color={getColorForStep(0)}
completedIcon={getIconForStepOne()} // this icon will be shown when your current step number is greater then this step's number
icon={<IconFileInfo size={iconSize} />} // this icon will be shown when your current step number is lesser or equal to this step's number
> |
Beta Was this translation helpful? Give feedback.
You can use something like this: