Stepper

When the task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.

Import Syntax

xxxxxxxxxx
 
import Stepper, {
  Step,
  StepTitle,
  StepDescription
} from 'calcite-react/Stepper'

Basic Usage

Complete Step

This is the first step in a series

Current Step

This is the second step in a series

Pending Step

This is the third step in a series

 
<Stepper currentStep={2}>
  <Step>
    <StepTitle>Complete Step</StepTitle>
    <StepDescription>This is the first step in a series</StepDescription>
  </Step>
  <Step>
    <StepTitle>Current Step</StepTitle>
    <StepDescription>This is the second step in a series</StepDescription>
  </Step>
  <Step>
    <StepTitle>Pending Step</StepTitle>
    <StepDescription>This is the third step in a series</StepDescription>
  </Step>
</Stepper>

Advanced Usage

Complete Step

This is the first step in a series

Error Step

This is the second step in a series

Pending Step

This is the third step in a series

error

Complete Step

This is the first step in a series

Current Step

This is the second step in a series

Pending Step

This is the third step in a series

selectable

Complete Step

Error Step

Current Step

small

 
<GuideExample label="error">
  <Stepper currentStep={2}>
    <Step>
      <StepTitle>Complete Step</StepTitle>
      <StepDescription>This is the first step in a series</StepDescription>
    </Step>
    <Step error>
      <StepTitle>Error Step</StepTitle>
      <StepDescription>This is the second step in a series</StepDescription>
    </Step>
    <Step>
      <StepTitle>Pending Step</StepTitle>
      <StepDescription>This is the third step in a series</StepDescription>
    </Step>
  </Stepper>
</GuideExample>
<GuideExample label="selectable">
  <Stepper currentStep={1}>
    <Step>
      <StepTitle>Complete Step</StepTitle>
      <StepDescription>This is the first step in a series</StepDescription>
    </Step>
    <Step selectable>
      <StepTitle>Current Step</StepTitle>
      <StepDescription>This is the second step in a series</StepDescription>
    </Step>
    <Step>
      <StepTitle>Pending Step</StepTitle>
      <StepDescription>This is the third step in a series</StepDescription>
    </Step>
  </Stepper>
</GuideExample>
<GuideExample label="small">
  <Stepper currentStep={3} small>
    <Step>
      <StepTitle>Complete Step</StepTitle>
    </Step>
    <Step error>
      <StepTitle>Error Step</StepTitle>
    </Step>
    <Step>
      <StepTitle>Current Step</StepTitle>
    </Step>
  </Stepper>
</GuideExample>

Custom Icons

Complete Step

Error Step

Current Step

Pending Step

Complete Step

Error Step

Current Step

Pending Step

small

 
<GuideExample>
  <Stepper currentStep={3}>
    <Step icon={<UserIcon />}>
      <StepTitle>Complete Step</StepTitle>
    </Step>
    <Step error icon={<ExclamationMarkCircleIcon />}>
      <StepTitle>Error Step</StepTitle>
    </Step>
    <Step icon={<SlidersIcon />}>
      <StepTitle>Current Step</StepTitle>
    </Step>
    <Step icon={<BananaIcon />}>
      <StepTitle>Pending Step</StepTitle>
    </Step>
  </Stepper>
</GuideExample>
<GuideExample label="small">
  <Stepper small currentStep={3}>
    <Step icon={<UserIcon />}>
      <StepTitle>Complete Step</StepTitle>
    </Step>
    <Step error icon={<ExclamationMarkCircleIcon />}>
      <StepTitle>Error Step</StepTitle>
    </Step>
    <Step icon={<SlidersIcon />}>
      <StepTitle>Current Step</StepTitle>
    </Step>
    <Step icon={<BananaIcon />}>
      <StepTitle>Pending Step</StepTitle>
    </Step>
  </Stepper>
</GuideExample>

Vertical

Complete Step

This is the first step in a series

Error Step

This is the second step in a series

Pending Step

This is the third step in a series

Complete Step

This is the first step in a series

Error Step

This is the second step in a series

Pending Step

This is the third step in a series

small

 
<GuideExample>
  <Stepper vertical currentStep={2}>
    <Step>
      <StepTitle>Complete Step</StepTitle>
      <StepDescription>This is the first step in a series</StepDescription>
    </Step>
    <Step error>
      <StepTitle>Error Step</StepTitle>
      <StepDescription>This is the second step in a series</StepDescription>
    </Step>
    <Step>
      <StepTitle>Pending Step</StepTitle>
      <StepDescription>This is the third step in a series</StepDescription>
    </Step>
  </Stepper>
</GuideExample>
<GuideExample label="small">
  <Stepper vertical small currentStep={2}>
    <Step>
      <StepTitle>Complete Step</StepTitle>
      <StepDescription>This is the first step in a series</StepDescription>
    </Step>
    <Step error>
      <StepTitle>Error Step</StepTitle>
      <StepDescription>This is the second step in a series</StepDescription>
    </Step>
    <Step>
      <StepTitle>Pending Step</StepTitle>
      <StepDescription>This is the third step in a series</StepDescription>
    </Step>
  </Stepper>
</GuideExample>

Controlled Stepper

Complete Step

This is the first step in a series

Current Step

This is the second step in a series

Pending Step

This is the third step in a series

 
() => {
  class StepperStory extends React.Component {
    constructor(props) {
      super(props)
      this.state = {
        currentStep: 1,
      }
      this.nextStep = this.nextStep.bind(this)
      this.prevStep = this.prevStep.bind(this)
    }
​
    nextStep() {
      this.setState({
        currentStep: this.state.currentStep + 1,
      })
    }
​
    prevStep() {
      this.setState({
        currentStep: this.state.currentStep - 1,
      })
    }
​
    render() {
      return (
        <div>
          <Stepper currentStep={this.state.currentStep}>
            <Step>
              <StepTitle>Complete Step</StepTitle>
              <StepDescription>
                This is the first step in a series
              </StepDescription>
            </Step>
            <Step>
              <StepTitle>Current Step</StepTitle>
              <StepDescription>
                This is the second step in a series
              </StepDescription>
            </Step>
            <Step>
              <StepTitle>Pending Step</StepTitle>
              <StepDescription>
                This is the third step in a series
              </StepDescription>
            </Step>
          </Stepper>
          <div style={{ marginTop: '1.55rem' }}>
            <Button
              clear
              onClick={this.prevStep}
              style={{ marginRight: '.5rem' }}
            >
              Previous
            </Button>
            <Button clear onClick={this.nextStep}>
              Next
            </Button>
          </div>
        </div>
      )
    }
  }
​
  return <StepperStory />
}

Props

Stepper `default`

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component; can be a Step.
small	Bool	false	-	A style prop used to render small Steps.
vertical	Bool	false	-	A style prop to position the Steps vertically.

Step

Property	Type	Required	Default	Description
children	Node	false	-	The content of the component; can be StepTitle or StepDescription.
error	Bool	false	-	A style prop used to render the Step in an error state with red text and X icon.

StepTitle

Property	Type	Required	Default	Description
children	Node	false	-	The text content of the component.

StepDescription

Property	Type	Required	Default	Description
children	Node	false	-	The text content of the component.

Calcite React

Stepper

Import Syntax

Basic Usage

Complete Step

Current Step

Pending Step

Advanced Usage

Complete Step

Error Step

Pending Step

Complete Step

Current Step

Pending Step

Complete Step

Error Step

Current Step

Custom Icons

Complete Step

Error Step

Current Step

Pending Step

Complete Step

Error Step

Current Step

Pending Step

Vertical

Complete Step

Error Step

Pending Step

Complete Step

Error Step

Pending Step

Controlled Stepper

Complete Step

Current Step

Pending Step

Props

Stepper default

Step

StepTitle

StepDescription

Stepper `default`