Skip to content
Lemonade

Stepper

Stepper is a visual representation of user progress through a set of steps. They guide the user through a number of steps in order to complete a specified process, generally a wizard.

Best practices

  • Display the steps sequentially in order from left to right.
  • Allow the user to return to a previous step to review their data submission.
  • When possible, use some indication of the status of the step, like when it's complete/validated, or incomplete/invalidated.

Step status

CompletedPresented when users achieve the minimum required to continue to the next step.
ActivePresented when the step is currently active and not validated yet.
IncompletedSteps not reached yet.

Examples

Manually controlled state

The state of the stepper is manually controlled via Step component props.

import { Step, Stepper } from '@lemonade/ui'
import React from 'react'

function StepperDefaultDemo() {
  return (
    <Stepper>
      <Step status='completed' title='Completed step' />
      <Step status='active' title='Second and active step' />
      <Step title='Some incompleted step' />
      <Step title='Last and incompleted step' />
    </Stepper>
  )
}

export default StepperDefaultDemo

Controling state with useStepperState hook

Optionally, the hook useStepperState can be used to control the stepper state.

import { Button, HFlow, Step, Stepper, useStepperState, VFlow } from '@lemonade/ui'
import React from 'react'

function StepperHookDemo() {
  const { getStepStatus, nextStep, previousStep } = useStepperState(1)

  return (
    <VFlow>
      <Stepper>
        <Step status={getStepStatus(0)} title='Step 1' />
        <Step status={getStepStatus(1)} title='Step 2' />
        <Step status={getStepStatus(2)} title='Step 3' />
        <Step status={getStepStatus(3)} title='Step 4' />
      </Stepper>

      <HFlow justifyContent='center'>
        <Button size='small' onClick={previousStep}>
          Previous
        </Button>
        <Button size='small' kind='primary' onClick={nextStep}>
          Next
        </Button>
      </HFlow>
    </VFlow>
  )
}

export default StepperHookDemo