Steppers

Steppers convey progress through numbered steps. Steppers display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.

Horizontal Linear

To show this type of Steppers you will need this code in down here.

     
<Stepper activeStep={activeStep} className="horizontal-stepper-linear">
    {steps.map((label, index) => {
        const props = {};
        const labelProps = {};
        if (this.isStepOptional(index)) {
            labelProps.optional = <Typography type="caption">Optional</Typography>;
        }
        if (this.isStepSkipped(index)) {
            props.completed = false;
        }
        return (
            <Step key={label} className={`horizontal-stepper
                 ${index===activeStep?'active':''}`} {...props}>
                <StepLabel className="stepperlabel" {...labelProps}>{label}</StepLabel>
            </Step>
        );
    })}
</Stepper>
<div>
    {activeStep === steps.length ? (
        <div>
            <Typography className="my-2">
                All steps completed - you"re finished
            </Typography>
            <Button onClick={this.handleReset} className="jr-btn">
                Reset
            </Button>
        </div>
    ) : (
        <div>
            <Typography className="my-2">{getStepContent(activeStep)}</Typography>
            <div>
                <Button disabled={activeStep === 0}
                    onClick={this.handleBack} className="jr-btn" >
                    Back
                </Button>
                {this.isStepOptional(activeStep) && (
                    <Button  variant="raised"  color="primary"
                            onClick={this.handleSkip} className="jr-btn" >
                        Skip
                    </Button>
                )}
                <Button variant="raised" color="primary"
                     onClick={this.handleNext} className="jr-btn">
                    {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                </Button>
            </div>
        </div>
    )}
</div>
  

Vertical Stepper

     
<Stepper activeStep={activeStep} orientation="vertical">
    {steps.map((label, index) => {
        return (
            <Step key={label}>
                <StepLabel>{label}</StepLabel>
                <StepContent className="pb-3">
                    <Typography>{getStepContent(index)}</Typography>
                    <div className="mt-2">
                        <div>
                            <Button
                                    disabled={activeStep === 0}
                                onClick={this.handleBack}
                            className="jr-btn">
                                Back
                            </Button>
                            <Button
                                    variant="raised"
                                    color="primary"
                                    onClick={this.handleNext}
                                    className="jr-btn">
                                {activeStep === steps.length - 1 ? 'Finish' : 'Next'}
                            </Button>
                        </div>
                    </div>
                </StepContent>
            </Step>
        );
    })}
</Stepper>
    {activeStep === steps.length && (
        <Paper square elevation={0} className="p-2">
            <Typography>All steps completed - you"re finished</Typography>
            <Button onClick={this.handleReset} className="jr-btn">
                Reset
            </Button>
        </Paper>
    )}

Available parameters, type and descriptions are down below.

Name	Type	Default	Description
activeStep	number	0	Set the active step (zero based index).
alternativeLabel	bool	false	If set to 'true' and orientation is horizontal, then the step label will be positioned under the icon.
children *	node		Two or more <Step /> components.
classes	object		Useful to extend the style applied to components.
connector	element	<StepConnector />	A component to be placed between each step.
nonLinear	bool	false	If set the Stepper will not assist in controlling steps for linear flow.
orientation	enum: 'horizontal' |  'vertical'	'horizontal'	The stepper orientation (layout flow direction).