@myntra/uikit-component-stepper v1.13.96

import Stepper from './src/stepper'

Stepper

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

Examples

Horizontal Stepper

• Without Small Steps
• With Small Steps

Vertical Stepper

• Without Small Steps
• With Small Steps

Step

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' />
</Stepper>

Small Step

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM'>
    <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' showLabel/>
    <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' />
  </Stepper.Step>
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' /> 
</Stepper>

Examples

Without Small Steps

First step

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

Second step completed

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed />
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' completed/>
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

All steps completed

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed />
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' completed/>
  <Stepper.Step label="Step3" completed/>
  <Stepper.Step label="Step4" completed/>
</Stepper>

Error step

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed />
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' completed/>
  <Stepper.Step label="Step3" error/>
  <Stepper.Step label="Step4" />
</Stepper>

With Small Steps

First step

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM'>
    <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' />
    <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' />
  </Stepper.Step>
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

First small step completed

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed>
    <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' completed />
    <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' />
  </Stepper.Step>
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' />
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

All small steps completed

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed>
    <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' completed />
    <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' completed/>
  </Stepper.Step>
  <Stepper.Step label="Step2" description='12 May; 12:00 PM'/>
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

Small step with error

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed>
    <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' completed />
    <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' error/>
  </Stepper.Step>
  <Stepper.Step label="Step2" description='12 May; 12:00 PM'/>
  <Stepper.Step label="Step3" />
  <Stepper.Step label="Step4" />
</Stepper>

All steps completed

<Stepper>
  <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed>
    <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' completed />
    <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' completed/>
  </Stepper.Step>
  <Stepper.Step label="Step2" description='12 May; 12:00 PM' completed/>
  <Stepper.Step label="Step3" completed/>
  <Stepper.Step label="Step4" completed/>
</Stepper>

Vertical Stepper

Without Small Steps - Vertical

<div style={{
  height: '500px'
}}>
  <Stepper orientation="vertical">
    <Stepper.Step label="Step1" description='12 May; 12:00 PM' />
    <Stepper.Step label="Step2" description='12 May; 12:00 PM' />
    <Stepper.Step label="Step3" />
    <Stepper.Step label="Step4" />
  </Stepper>
</div>

With small steps - Vertical

<div style={{
  height: '500px'
}}>
  <Stepper orientation="vertical">
    <Stepper.Step label="Step1" description='12 May; 12:00 PM' completed />
    <Stepper.Step label="Step2" description='12 May; 12:00 PM' completed>
      <Stepper.SmallStep label="Step1.1" description='12 May; 12:00 PM' completed />
      <Stepper.SmallStep label="Step1.2" description='12 May; 12:00 PM' completed />
    </Stepper.Step>
    <Stepper.Step label="Step3" />
    <Stepper.Step label="Step4" />
  </Stepper>
</div>