Stepper

Leave feedback

Steppers display progress through a sequence of separate steps towards a particular goal for more complex tasks. This provides a more manageable experience by allowing the user to focus on smaller pieces of the task at hand.

This stepper can be used not only for initial setup, but also for future configuration changes over time by linking to the relevant step.

Steps

On page load, all steps will display a number and short label to help the user understand the sequence of actions towards setup or creation. Steppers should follow a linear progression, requiring the user to navigate between all steps in chronological order for initial setup Incomplete and active steps will always display a number. Completed steps will display a checkmark icon. Steps missing required input from the user will display the step error state.

The "Next" button, positioned on the right side of the footer, is used to progress to the next step in the process. This button should be active and available at all times. On the final workflow step, this button can display a contextual label related to the action (ex: 'FINISH', or 'APPLY'). When the user has moved past the first step, display a Secondary outline button with a 'Back' label all the way to the left in the footer to allow them to move backwards in a linear progression. The user can navigate back a single step, or multiple, but can only move forward with the 'Next' button in the footer. (The numbered steps and check marks are not interactive) The user may move back a step if they have not completed the active step without validation being required for the current step. Any actions that have been taken on the current step should be retained (data should not be cleared unless the user is warned. Note: Future use cases may require a third action button, positioned directly before the “Next” button, on the right. Examples include saving a draft or launching a preview within the flow.

Errors and warnings

Display the step error state and do not allow the user to move ahead on any step missing required input from the user. The error state should display a contextual label related to the active step. Request confirmation from users who choose to exit and discontinue before completing all steps in the workflow. The user should understand that all edits and changes will be lost if they do so. Display a browser confirmation dialog when closing the tab or navigating with the browser back button before completing all steps in the workflow. The user should understand that all edits and changes will be lost if they proceed.

Basic Usage

A Stepper must wrap a set of composed subcomponents:

Stepper.Header
Stepper.Step
Stepper.ActionRow

The order of steps is dictated by the order of Stepper.Step components in the code.

Stepper.Step and Stepper.ActionRow are hidden until their eventKey props match the activeKey on Stepper.

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const steps = ['welcome', 'choose-cats', 'review'];
  const [currentStep, setCurrentStep] = useState(steps[0]);

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <Container size="sm" className="py-5">
        <Stepper.Step eventKey="welcome" title="Welcome">
          <h2>Welcome to the cat workflow</h2>
          <HipsterIpsum numParagraphs={2} />
        </Stepper.Step>

        <Stepper.Step eventKey="choose-cats" title="Chooseth a cat">
          <h2>Choose a cat!</h2>
          <HipsterIpsum numParagraphs={2} />
        </Stepper.Step>

        <Stepper.Step eventKey="review" title="Review">
          <h2>Review your work</h2>
          <HipsterIpsum numParagraphs={2} />
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="welcome">
          <Button variant="outline-primary" onClick={() => alert('Cancel')}>
            Cancel
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('choose-cats')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="choose-cats">
          <Button variant="outline-primary" onClick={() => setCurrentStep('welcome')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('review')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="review">
          <Button variant="outline-primary" onClick={() => setCurrentStep('choose-cats')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Apply</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

() => {
  const steps = ['welcome', 'choose-cats', 'review'];
  const [currentStep, setCurrentStep] = useState(steps[0]);

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <Container size="sm" className="py-5">
        <Stepper.Step eventKey="welcome" title="Welcome">
          <h2>Welcome to the cat workflow</h2>
          <HipsterIpsum numParagraphs={2} />
        </Stepper.Step>

        <Stepper.Step eventKey="choose-cats" title="Chooseth a cat">
          <h2>Choose a cat!</h2>
          <HipsterIpsum numParagraphs={2} />
        </Stepper.Step>

        <Stepper.Step eventKey="review" title="Review">
          <h2>Review your work</h2>
          <HipsterIpsum numParagraphs={2} />
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="welcome">
          <Button variant="outline-primary" onClick={() => alert('Cancel')}>
            Cancel
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('choose-cats')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="choose-cats">
          <Button variant="outline-primary" onClick={() => setCurrentStep('welcome')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('review')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="review">
          <Button variant="outline-primary" onClick={() => setCurrentStep('choose-cats')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Apply</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

Clickable Header

Use Stepper.Step's onClick prop to enable clickable behaviour for step's header. This should primarily be used to implement navigation between steps by clicking on their headers.

Note: this prop takes effect (i.e., header becomes clickable) only after the step has been visited.

Basic usage

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const steps = ['introduction', 'benefits', 'finally'];
  const [currentStep, setCurrentStep] = useState(steps[0]);

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <Container size="sm" className="py-5">
        <Stepper.Step onClick={() => setCurrentStep('introduction')} eventKey="introduction" title="Introduction">
          <h2>Introduction</h2>
          <HipsterIpsum numParagraphs={1} />
        </Stepper.Step>

        <Stepper.Step onClick={() => setCurrentStep('benefits')} eventKey="benefits" title="Benefits">
          <h2>Benefits</h2>
          <HipsterIpsum numParagraphs={1} />
        </Stepper.Step>

        <Stepper.Step onClick={() => setCurrentStep('finally')} eventKey="finally" title="Finally!">
          <h2>Finally</h2>
          <HipsterIpsum numParagraphs={1} />
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="introduction">
          <Button variant="outline-primary" onClick={() => alert('Cancel')}>
            Cancel
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('benefits')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="benefits">
          <Button variant="outline-primary" onClick={() => setCurrentStep('introduction')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('finally')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="finally">
          <Button variant="outline-primary" onClick={() => setCurrentStep('benefits')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Apply</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

() => {
  const steps = ['introduction', 'benefits', 'finally'];
  const [currentStep, setCurrentStep] = useState(steps[0]);

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <Container size="sm" className="py-5">
        <Stepper.Step onClick={() => setCurrentStep('introduction')} eventKey="introduction" title="Introduction">
          <h2>Introduction</h2>
          <HipsterIpsum numParagraphs={1} />
        </Stepper.Step>

        <Stepper.Step onClick={() => setCurrentStep('benefits')} eventKey="benefits" title="Benefits">
          <h2>Benefits</h2>
          <HipsterIpsum numParagraphs={1} />
        </Stepper.Step>

        <Stepper.Step onClick={() => setCurrentStep('finally')} eventKey="finally" title="Finally!">
          <h2>Finally</h2>
          <HipsterIpsum numParagraphs={1} />
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="introduction">
          <Button variant="outline-primary" onClick={() => alert('Cancel')}>
            Cancel
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('benefits')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="benefits">
          <Button variant="outline-primary" onClick={() => setCurrentStep('introduction')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => setCurrentStep('finally')}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="finally">
          <Button variant="outline-primary" onClick={() => setCurrentStep('benefits')}>
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Apply</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

With Error State

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const steps = ['checkbox', 'success'];
  const [currentStep, setCurrentStep] = useState(steps[0]);
  const [isChecked, check, uncheck, toggleChecked] = useToggle(false);
  const [hasError, setError, removeError] = useToggle(false);
  const [isAlertOpen, openAlert, closeAlert] = useToggle(false)

  const evaluateCheckbox = () => {
    if (isChecked) {
      removeError();
      setCurrentStep('success');
    } else {
      setError();
    }
  };

  const resetCheckbox = () => {
    closeAlert();
    uncheck();
    removeError();
  };

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <AlertModal
        title="Confirm reset"
        isOpen={isAlertOpen}
        onClose={closeAlert}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={closeAlert}>Cancel</Button>
            <Button variant="danger" onClick={resetCheckbox}>Confirm</Button>
          </ActionRow>
        )}
      >
        <p>
          Are you sure you wish to reset the checkbox?
        </p>
      </AlertModal>

      <Container size="sm" className="py-5">
        <Stepper.Step
          eventKey="checkbox"
          title="Check the Box"
          index={steps.indexOf('checkbox')}
          description={hasError ? 'Please check the box to continue.' : ''}
          hasError={hasError}
          onClick={() => setCurrentStep('checkbox')}
        >
          <h2>Check the box</h2>
          <Form.Checkbox checked={isChecked} onChange={toggleChecked}>
            Check me!
          </Form.Checkbox>
        </Stepper.Step>

        <Stepper.Step
          eventKey="success"
          title="Success!"
          index={steps.indexOf('success')}
          onClick={evaluateCheckbox}
        >
          <h2>Success!</h2>
          <p>You may now complete this demo.</p>
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="checkbox">
          <Button variant="outline-primary" onClick={openAlert}>
            Reset
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => evaluateCheckbox()}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="success">
          <Button
            variant="outline-primary"
            onClick={() => setCurrentStep('checkbox')}
          >
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Complete</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

() => {
  const steps = ['checkbox', 'success'];
  const [currentStep, setCurrentStep] = useState(steps[0]);
  const [isChecked, check, uncheck, toggleChecked] = useToggle(false);
  const [hasError, setError, removeError] = useToggle(false);
  const [isAlertOpen, openAlert, closeAlert] = useToggle(false)

  const evaluateCheckbox = () => {
    if (isChecked) {
      removeError();
      setCurrentStep('success');
    } else {
      setError();
    }
  };

  const resetCheckbox = () => {
    closeAlert();
    uncheck();
    removeError();
  };

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <AlertModal
        title="Confirm reset"
        isOpen={isAlertOpen}
        onClose={closeAlert}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={closeAlert}>Cancel</Button>
            <Button variant="danger" onClick={resetCheckbox}>Confirm</Button>
          </ActionRow>
        )}
      >
        <p>
          Are you sure you wish to reset the checkbox?
        </p>
      </AlertModal>

      <Container size="sm" className="py-5">
        <Stepper.Step
          eventKey="checkbox"
          title="Check the Box"
          index={steps.indexOf('checkbox')}
          description={hasError ? 'Please check the box to continue.' : ''}
          hasError={hasError}
          onClick={() => setCurrentStep('checkbox')}
        >
          <h2>Check the box</h2>
          <Form.Checkbox checked={isChecked} onChange={toggleChecked}>
            Check me!
          </Form.Checkbox>
        </Stepper.Step>

        <Stepper.Step
          eventKey="success"
          title="Success!"
          index={steps.indexOf('success')}
          onClick={evaluateCheckbox}
        >
          <h2>Success!</h2>
          <p>You may now complete this demo.</p>
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="checkbox">
          <Button variant="outline-primary" onClick={openAlert}>
            Reset
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => evaluateCheckbox()}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="success">
          <Button
            variant="outline-primary"
            onClick={() => setCurrentStep('checkbox')}
          >
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Complete</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

A composition of a stepper with a FullscreenModal.

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const steps = ['welcome', 'choose-cats', 'review'];
  const [currentStep, setCurrentStep] = useState(steps[0]);
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open fullscreen modal</Button>

      <Stepper activeKey={currentStep}>
        <FullscreenModal
          title="My dialog"
          className="bg-light-200"
          isOpen={isOpen}
          onClose={close}
          beforeBodyNode={<Stepper.Header className="border-bottom border-light" />}
          footerNode={(
            <>
              <Stepper.ActionRow eventKey="welcome">
                <Button variant="outline-primary" onClick={close}>
                  Cancel
                </Button>
                <Stepper.ActionRow.Spacer />
                <Button onClick={() => setCurrentStep('choose-cats')}>Next</Button>
              </Stepper.ActionRow>

              <Stepper.ActionRow eventKey="choose-cats">
                <Button variant="outline-primary" onClick={() => setCurrentStep('welcome')}>
                  Previous
                </Button>
                <Stepper.ActionRow.Spacer />
                <Button onClick={() => setCurrentStep('review')}>Next</Button>
              </Stepper.ActionRow>

              <Stepper.ActionRow eventKey="review">
                <Button variant="outline-primary" onClick={() => setCurrentStep('choose-cats')}>
                  Previous
                </Button>
                <Stepper.ActionRow.Spacer />
                <Button onClick={close}>Apply</Button>
              </Stepper.ActionRow>
            </>
          )}
        >
          <Container size="md">
            <Stepper.Step eventKey="welcome" title="Welcome">
              <h2>Welcome to the cat workflow</h2>
              <HipsterIpsum numParagraphs={2} />
            </Stepper.Step>

            <Stepper.Step eventKey="choose-cats" title="Chooseth a cat">
              <h2>Choose a cat!</h2>
              <HipsterIpsum numParagraphs={2} />
            </Stepper.Step>

            <Stepper.Step eventKey="review" title="Review">
              <h2>Review your work</h2>
              <HipsterIpsum numParagraphs={2} />
            </Stepper.Step>
          </Container>
        </FullscreenModal>
      </Stepper>
    </>
  )
}

() => {
  const steps = ['welcome', 'choose-cats', 'review'];
  const [currentStep, setCurrentStep] = useState(steps[0]);
  const [isOpen, open, close] = useToggle(false);
  return (
    <>
      <Button variant="outline-primary" onClick={open}>Open fullscreen modal</Button>

      <Stepper activeKey={currentStep}>
        <FullscreenModal
          title="My dialog"
          className="bg-light-200"
          isOpen={isOpen}
          onClose={close}
          beforeBodyNode={<Stepper.Header className="border-bottom border-light" />}
          footerNode={(
            <>
              <Stepper.ActionRow eventKey="welcome">
                <Button variant="outline-primary" onClick={close}>
                  Cancel
                </Button>
                <Stepper.ActionRow.Spacer />
                <Button onClick={() => setCurrentStep('choose-cats')}>Next</Button>
              </Stepper.ActionRow>

              <Stepper.ActionRow eventKey="choose-cats">
                <Button variant="outline-primary" onClick={() => setCurrentStep('welcome')}>
                  Previous
                </Button>
                <Stepper.ActionRow.Spacer />
                <Button onClick={() => setCurrentStep('review')}>Next</Button>
              </Stepper.ActionRow>

              <Stepper.ActionRow eventKey="review">
                <Button variant="outline-primary" onClick={() => setCurrentStep('choose-cats')}>
                  Previous
                </Button>
                <Stepper.ActionRow.Spacer />
                <Button onClick={close}>Apply</Button>
              </Stepper.ActionRow>
            </>
          )}
        >
          <Container size="md">
            <Stepper.Step eventKey="welcome" title="Welcome">
              <h2>Welcome to the cat workflow</h2>
              <HipsterIpsum numParagraphs={2} />
            </Stepper.Step>

            <Stepper.Step eventKey="choose-cats" title="Chooseth a cat">
              <h2>Choose a cat!</h2>
              <HipsterIpsum numParagraphs={2} />
            </Stepper.Step>

            <Stepper.Step eventKey="review" title="Review">
              <h2>Review your work</h2>
              <HipsterIpsum numParagraphs={2} />
            </Stepper.Step>
          </Container>
        </FullscreenModal>
      </Stepper>
    </>
  )
}

Error State

A composition of a stepper with the hasError prop. Note that the index prop is also required for steps to rerender correctly here.

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  const steps = ['checkbox', 'success'];
  const [currentStep, setCurrentStep] = useState(steps[0]);
  const [isChecked, check, uncheck, toggleChecked] = useToggle(false);
  const [hasError, setError, removeError] = useToggle(false);
  const [isAlertOpen, openAlert, closeAlert] = useToggle(false)

  const evaluateCheckbox = () => {
    if (isChecked) {
      removeError();
      setCurrentStep('success');
    } else {
      setError();
    }
  };

  const resetCheckbox = () => {
    closeAlert();
    uncheck();
    removeError();
  };

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <AlertModal
        title="Confirm reset"
        isOpen={isAlertOpen}
        onClose={closeAlert}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={closeAlert}>Cancel</Button>
            <Button variant="danger" onClick={resetCheckbox}>Confirm</Button>
          </ActionRow>
        )}
      >
        <p>
          Are you sure you wish to reset the checkbox?
        </p>
      </AlertModal>

      <Container size="sm" className="py-5">
        <Stepper.Step
          eventKey="checkbox"
          title="Check the Box"
          index={steps.indexOf('checkbox')}
          description={hasError ? 'Please check the box to continue.' : ''}
          hasError={hasError}
        >
          <h2>Check the box</h2>
          <Form.Checkbox checked={isChecked} onChange={toggleChecked}>
            Check me!
          </Form.Checkbox>
        </Stepper.Step>

        <Stepper.Step
          eventKey="success"
          title="Success!"
          index={steps.indexOf('success')}
        >
          <h2>Success!</h2>
          <p>You may now complete this demo.</p>
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="checkbox">
          <Button variant="outline-primary" onClick={openAlert}>
            Reset
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => evaluateCheckbox()}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="success">
          <Button
            variant="outline-primary"
            onClick={() => setCurrentStep('checkbox')}
          >
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Complete</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

() => {
  const steps = ['checkbox', 'success'];
  const [currentStep, setCurrentStep] = useState(steps[0]);
  const [isChecked, check, uncheck, toggleChecked] = useToggle(false);
  const [hasError, setError, removeError] = useToggle(false);
  const [isAlertOpen, openAlert, closeAlert] = useToggle(false)

  const evaluateCheckbox = () => {
    if (isChecked) {
      removeError();
      setCurrentStep('success');
    } else {
      setError();
    }
  };

  const resetCheckbox = () => {
    closeAlert();
    uncheck();
    removeError();
  };

  return (
    <Stepper activeKey={currentStep}>
      <Stepper.Header />

      <AlertModal
        title="Confirm reset"
        isOpen={isAlertOpen}
        onClose={closeAlert}
        footerNode={(
          <ActionRow>
            <Button variant="tertiary" onClick={closeAlert}>Cancel</Button>
            <Button variant="danger" onClick={resetCheckbox}>Confirm</Button>
          </ActionRow>
        )}
      >
        <p>
          Are you sure you wish to reset the checkbox?
        </p>
      </AlertModal>

      <Container size="sm" className="py-5">
        <Stepper.Step
          eventKey="checkbox"
          title="Check the Box"
          index={steps.indexOf('checkbox')}
          description={hasError ? 'Please check the box to continue.' : ''}
          hasError={hasError}
        >
          <h2>Check the box</h2>
          <Form.Checkbox checked={isChecked} onChange={toggleChecked}>
            Check me!
          </Form.Checkbox>
        </Stepper.Step>

        <Stepper.Step
          eventKey="success"
          title="Success!"
          index={steps.indexOf('success')}
        >
          <h2>Success!</h2>
          <p>You may now complete this demo.</p>
        </Stepper.Step>
      </Container>

      <div className="py-3">
        <Stepper.ActionRow eventKey="checkbox">
          <Button variant="outline-primary" onClick={openAlert}>
            Reset
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => evaluateCheckbox()}>Next</Button>
        </Stepper.ActionRow>

        <Stepper.ActionRow eventKey="success">
          <Button
            variant="outline-primary"
            onClick={() => setCurrentStep('checkbox')}
          >
            Previous
          </Button>
          <Stepper.ActionRow.Spacer />
          <Button onClick={() => alert('Completed')}>Complete</Button>
        </Stepper.ActionRow>
      </div>
    </Stepper>
  )
}

Theme Variables (SCSS)#

$stepper-header-bg:                                        transparent !default;
$stepper-header-min-height:                                5.13rem !default;
$stepper-header-padding-y:                                 .75rem !default;
$stepper-header-padding-x:                                 $spacer !default;
$stepper-header-line-bg:                                   $light !default;
$stepper-header-line-height:                               1px !default;
$stepper-header-step-color:                                $primary !default;
$stepper-header-step-bg:                                   $stepper-header-bg !default;
$stepper-header-step-border:                               none !default;
$stepper-header-step-min-width:                            0 !default;
$stepper-header-step-padding:                              .25rem !default;
$stepper-header-step-list-padding-y:                       .25rem !default;
$stepper-header-step-list-padding-x:                       0 !default;
$stepper-header-step-list-margin:                          0 !default;
$stepper-header-active-step-bg:                            $gray-500 !default;
$stepper-header-step-error-bubble-color:                   $danger !default;
$stepper-header-step-error-bubble-shadow-width:            3px !default;
$stepper-header-step-error-description-color:              $stepper-header-step-error-bubble-color !default;

Props API#

Stepper Props API

children node Required
Specifies the content of the Stepper.
activeKey string Required
The eventKey of the step to display.

StepperStep Props API

children node Required
Specifies the content of the Step.
className string
Specifies class name to append to the base element
eventKey string Required
An identifier of the Step. When activeKey on the Stepper equals to the eventKey, the Step will be displayed.
title string Required
A text of the Step.
description string
A text under the title.
hasError bool
Informs user if this Step has errors.
Defaultfalse
index number
Position of the Step, only required if adding error state or conditionally rendering steps.
onClick func
Click handler for the Step. Takes effect only after the Step has been visited, making it clickable and invoking this function on click. Should be used to provide navigation between steps.

StepperActionRow Props API

children node Required
Specifies the content of the ActionRow.
eventKey string Required
An identifier of the ActionRow. When activeKey on the Stepper equals to the eventKey, the ActionRow will be displayed.
as elementType
Specifies the base element
DefaultActionRow

StepperHeader Props API

className string
Specifies class name to append to the base element.
Defaultnull
PageCountComponent elementType
A component that receives activeStepIndex and totalSteps props to display them.
Default({ activeStepIndex, totalSteps }) => `Step ${activeStepIndex + 1} of ${totalSteps}`
compactWidth enum'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
The max width in which the compact view of the header will switch to display the step number that is currently in progress. Options include 'xs', 'sm', 'md', 'lg', 'xl', and 'xxl'.
Default'sm'

StepperHeaderStep Props API

index number Required
A number that will be display in the icon of the HeaderStep.
title string Required
A text of the HeaderStep.
isActive bool
Specifies that this HeaderStep is active.
Defaultfalse
hasError bool
Informs user if this Step has errors.
Defaultfalse
description string
A text under the title.
onClick func
Callback fired when element gets clicked.

Usage Insights#

Stepper

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.39.2	3
frontend-app-course-authoring	20.35.1	1
frontend-app-learner-portal-enterprise	20.45.1	1

StepperActionRow

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.39.2	9
frontend-app-course-authoring	20.35.1	2
frontend-app-learner-portal-enterprise	20.45.1	3

StepperHeader

	Project Name	Paragon Version	Instance Count
	frontend-app-admin-portal	20.39.2	2
	frontend-app-course-authoring	20.35.1	1

StepperStep

Project Name	Paragon Version	Instance Count
frontend-app-admin-portal	20.39.2	9
frontend-app-course-authoring	20.35.1	2
frontend-app-learner-portal-enterprise	20.45.1	3

Leave feedback

Paragon Design System

Theme

Stepper

Steps

Navigation

Errors and warnings

Basic Usage

Clickable Header

Basic usage

With Error State

Error State

Theme Variables (SCSS)#

Props API#

Usage Insights#

Stepper

StepperActionRow

StepperHeader

StepperStep

All components (A-Z)

Theme

Stepper

Steps#

Navigation#

Errors and warnings#

Basic Usage#

Clickable Header#

Basic usage#

With Error State#

In a modal#

Error State#

Theme Variables (SCSS)#

Props API#

Usage Insights#

Stepper

StepperActionRow

StepperHeader

StepperStep

All components (A-Z)

Steps

Navigation

Errors and warnings

Basic Usage

Clickable Header

Basic usage

With Error State

In a modal

Error State