Stepper

View on MongoDB.design

Installation

Yarn

yarn add @leafygreen-ui/stepper

NPM

npm install @leafygreen-ui/stepper

Example

<Stepper currentStep={0} maxDisplayedSteps={2}>
  <div>Step 1</div>
  <div>Step 2</div>
</Stepper>

or

<Stepper currentStep={0} maxDisplayedSteps={2}>
  <Step>Step 1</Step>
  <Step>Step 2</Step>
</Stepper>

Output HTML

<ol class="leafygreen-ui-1pvgjhr" aria-label="progress">
  <li>
    <div class="leafygreen-ui-1x8f1m7" aria-label="step1" aria-current="step">
      <div class="lg-ui-03f12bfd leafygreen-ui-1dyv85w">
        <div class="leafygreen-ui-17xqetg">1</div>
      </div>
      <p class="lg-ui-d036aa4e leafygreen-ui-1u866nc">Step 1</p>
    </div>
  </li>
  <li>
    <div class="leafygreen-ui-1x8f1m7" aria-label="step2" aria-current="false">
      <div class="lg-ui-03f12bfd leafygreen-ui-1oypnhq">
        <div class="leafygreen-ui-17xqetg">2</div>
      </div>
      <p class="lg-ui-d036aa4e leafygreen-ui-1uk291k">Step 2</p>
    </div>
  </li>
</ol>

Properties

| Prop | Type | Description | Default | | --------------------- | ----------------- | ------------------------------------------------------------------------------------------------------ | ----------------- | | children | React.ReactNode | ReactNode to display as the children of each step | | | currentStep | number | Starting at 0, index of current step that should be highlighted. | | | maxDisplayedSteps | number | Maximum number of steps displayed a time. The rest are hidden. | children.length | | completedStepsShown | number | Number of completed steps shown before the currentStep. The ellipses step is included in this count. | 1 | | className | string | className applied to the root element | |