Forma 36 - ProgressStepper

Import

import { ProgressStepper } from '@contentful/f36-components';
// or
import { ProgressStepper } from '@contentful/f36-progress-stepper';

Examples

Orientation

This component can be displayed in a horizontal or vertical orientation.

Example of ProgressStepper with horizontal orientation.

1
2
3
4
5
function ProgressStepperHorizontalExample() {
  return (
    <ProgressStepper activeStep={2} ariaLabel="Horizontal progress stepper">
      <ProgressStepper.Step state="complete" />
      <ProgressStepper.Step state="complete" />
      <ProgressStepper.Step state="active" />
      <ProgressStepper.Step />
      <ProgressStepper.Step />
    </ProgressStepper>
  );
}function ProgressStepperHorizontalExample() {
  return (
    <ProgressStepper activeStep={2} ariaLabel="Horizontal progress stepper">
      <ProgressStepper.Step state="complete" />
      <ProgressStepper.Step state="complete" />
      <ProgressStepper.Step state="active" />
      <ProgressStepper.Step />
      <ProgressStepper.Step />
    </ProgressStepper>
  );
}
Open in Playground

Example of ProgressStepper with vertical orientation.

1
2
3
4
5
function ProgressStepperVerticalExample() {
  return (
    <div
      style={{
        height: '400px',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <ProgressStepper
        activeStep={2}
        orientation="vertical"
        ariaLabel="Vertical progress stepper"
      >
        <ProgressStepper.Step state="complete" />
        <ProgressStepper.Step state="complete" />
        <ProgressStepper.Step state="active" />
        <ProgressStepper.Step />
        <ProgressStepper.Step />
      </ProgressStepper>
    </div>
  );
}function ProgressStepperVerticalExample() {
  return (
    <div
      style={{
        height: '400px',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <ProgressStepper
        activeStep={2}
        orientation="vertical"
        ariaLabel="Vertical progress stepper"
      >
        <ProgressStepper.Step state="complete" />
        <ProgressStepper.Step state="complete" />
        <ProgressStepper.Step state="active" />
        <ProgressStepper.Step />
        <ProgressStepper.Step />
      </ProgressStepper>
    </div>
  );
}
Open in Playground

Step Styles

This component can be displayed with steps that show numbers or icons.

Example of ProgressStepper with number step styles and displaying the step state options.

1Active
2Complete
3Incomplete
4Disabled
5Error
6Warning
function ProgressStepperNumberExample() {
  return (
    <ProgressStepper
      activeStep={0}
      stepStyle="number"
      ariaLabel="Number progress stepper"
    >
      <ProgressStepper.Step state="active" labelText="Active" />
      <ProgressStepper.Step state="complete" labelText="Complete" />
      <ProgressStepper.Step labelText="Incomplete" />
      <ProgressStepper.Step state="disabled" labelText="Disabled" />
      <ProgressStepper.Step state="error" labelText="Error" />
      <ProgressStepper.Step state="warning" labelText="Warning" />
    </ProgressStepper>
  );
}function ProgressStepperNumberExample() {
  return (
    <ProgressStepper
      activeStep={0}
      stepStyle="number"
      ariaLabel="Number progress stepper"
    >
      <ProgressStepper.Step state="active" labelText="Active" />
      <ProgressStepper.Step state="complete" labelText="Complete" />
      <ProgressStepper.Step labelText="Incomplete" />
      <ProgressStepper.Step state="disabled" labelText="Disabled" />
      <ProgressStepper.Step state="error" labelText="Error" />
      <ProgressStepper.Step state="warning" labelText="Warning" />
    </ProgressStepper>
  );
}
Open in Playground

Example of ProgressStepper with icon step styles and displaying the step state options.

Active
Complete
Incomplete
Disabled
Error
Warning
function ProgressStepperIconExample() {
  return (
    <ProgressStepper
      activeStep={0}
      stepStyle="icon"
      ariaLabel="Icon progress stepper"
    >
      <ProgressStepper.Step state="active" labelText="Active" />
      <ProgressStepper.Step state="complete" labelText="Complete" />
      <ProgressStepper.Step labelText="Incomplete" />
      <ProgressStepper.Step state="disabled" labelText="Disabled" />
      <ProgressStepper.Step state="error" labelText="Error" />
      <ProgressStepper.Step state="warning" labelText="Warning" />
    </ProgressStepper>
  );
}function ProgressStepperIconExample() {
  return (
    <ProgressStepper
      activeStep={0}
      stepStyle="icon"
      ariaLabel="Icon progress stepper"
    >
      <ProgressStepper.Step state="active" labelText="Active" />
      <ProgressStepper.Step state="complete" labelText="Complete" />
      <ProgressStepper.Step labelText="Incomplete" />
      <ProgressStepper.Step state="disabled" labelText="Disabled" />
      <ProgressStepper.Step state="error" labelText="Error" />
      <ProgressStepper.Step state="warning" labelText="Warning" />
    </ProgressStepper>
  );
}
Open in Playground

Labels

Example of ProgressStepper with horizontal orientation with labels.

1Label 1
2Label 2
3Label 3
4Label 4
5Label 5
function ProgressStepperHorizontalLabelExample() {
  return (
    <ProgressStepper
      activeStep={2}
      ariaLabel="Horizontal progress stepper with labels"
    >
      <ProgressStepper.Step state="complete" labelText="Label 1" />
      <ProgressStepper.Step state="complete" labelText="Label 2" />
      <ProgressStepper.Step state="active" labelText="Label 3" />
      <ProgressStepper.Step labelText="Label 4" />
      <ProgressStepper.Step labelText="Label 5" />
    </ProgressStepper>
  );
}function ProgressStepperHorizontalLabelExample() {
  return (
    <ProgressStepper
      activeStep={2}
      ariaLabel="Horizontal progress stepper with labels"
    >
      <ProgressStepper.Step state="complete" labelText="Label 1" />
      <ProgressStepper.Step state="complete" labelText="Label 2" />
      <ProgressStepper.Step state="active" labelText="Label 3" />
      <ProgressStepper.Step labelText="Label 4" />
      <ProgressStepper.Step labelText="Label 5" />
    </ProgressStepper>
  );
}
Open in Playground

Example of ProgressStepper with vertical orientation with labels.

1Label 1
2Label 2
3Label 3
4Label 4
5Label 5
function ProgressStepperVerticalLabelExample() {
  return (
    <div
      style={{
        height: '400px',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <ProgressStepper
        activeStep={2}
        orientation="vertical"
        ariaLabel="Vertical progress stepper with labels"
      >
        <ProgressStepper.Step state="complete" labelText="Label 1" />
        <ProgressStepper.Step state="complete" labelText="Label 2" />
        <ProgressStepper.Step state="active" labelText="Label 3" />
        <ProgressStepper.Step labelText="Label 4" />
        <ProgressStepper.Step labelText="Label 5" />
      </ProgressStepper>
    </div>
  );
}function ProgressStepperVerticalLabelExample() {
  return (
    <div
      style={{
        height: '400px',
        display: 'flex',
        justifyContent: 'center',
      }}
    >
      <ProgressStepper
        activeStep={2}
        orientation="vertical"
        ariaLabel="Vertical progress stepper with labels"
      >
        <ProgressStepper.Step state="complete" labelText="Label 1" />
        <ProgressStepper.Step state="complete" labelText="Label 2" />
        <ProgressStepper.Step state="active" labelText="Label 3" />
        <ProgressStepper.Step labelText="Label 4" />
        <ProgressStepper.Step labelText="Label 5" />
      </ProgressStepper>
    </div>
  );
}
Open in Playground

Interactive Example

Example of the ProgressStepper with buttons to move between steps.

Step 1
Step 2
Step 3
Step 4
Step 5
function ProgressStepperInteractiveExample() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' },
    { label: 'Step 4' },
    { label: 'Step 5' },
  ];

  const getSteps = () => {
    return steps.map((step, index) => {
      if (index === currentStep) {
        return (
          <ProgressStepper.Step
            key={step.label}
            state="active"
            labelText={step.label}
          />
        );
      } else if (index < currentStep) {
        return (
          <ProgressStepper.Step
            key={step.label}
            state="complete"
            labelText={step.label}
          />
        );
      }

      return (
        <ProgressStepper.Step
          key={step.label}
          state="incomplete"
          labelText={step.label}
        />
      );
    });
  };

  return (
    <>
      <ProgressStepper
        stepStyle="icon"
        activeStep={currentStep}
        ariaLabel="Interactive progress stepper"
      >
        {getSteps()}
      </ProgressStepper>
      <Flex marginTop="spacingM" gap="spacingXs">
        <Button
          onClick={() => setCurrentStep(currentStep - 1)}
          isDisabled={currentStep === 0}
        >
          Previous Step
        </Button>
        <Button
          onClick={() => setCurrentStep(currentStep + 1)}
          isDisabled={currentStep > steps.length - 1}
        >
          Next Step
        </Button>
      </Flex>
    </>
  );
}function ProgressStepperInteractiveExample() {
  const [currentStep, setCurrentStep] = useState(0);

  const steps = [
    { label: 'Step 1' },
    { label: 'Step 2' },
    { label: 'Step 3' },
    { label: 'Step 4' },
    { label: 'Step 5' },
  ];

  const getSteps = () => {
    return steps.map((step, index) => {
      if (index === currentStep) {
        return (
          <ProgressStepper.Step
            key={step.label}
            state="active"
            labelText={step.label}
          />
        );
      } else if (index < currentStep) {
        return (
          <ProgressStepper.Step
            key={step.label}
            state="complete"
            labelText={step.label}
          />
        );
      }

      return (
        <ProgressStepper.Step
          key={step.label}
          state="incomplete"
          labelText={step.label}
        />
      );
    });
  };

  return (
    <>
      <ProgressStepper
        stepStyle="icon"
        activeStep={currentStep}
        ariaLabel="Interactive progress stepper"
      >
        {getSteps()}
      </ProgressStepper>
      <Flex marginTop="spacingM" gap="spacingXs">
        <Button
          onClick={() => setCurrentStep(currentStep - 1)}
          isDisabled={currentStep === 0}
        >
          Previous Step
        </Button>
        <Button
          onClick={() => setCurrentStep(currentStep + 1)}
          isDisabled={currentStep > steps.length - 1}
        >
          Next Step
        </Button>
      </Flex>
    </>
  );
}
Open in Playground

Props (API reference)

Open in Storybook

ProgressStepper

Name	Type	Default
ariaLabel required	string Label to be used on aria-label for the nav element
children required	ReactNode
activeStep	number	0
className	string string for additional classNames
margin	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin to one of the corresponding spacing tokens
marginBottom	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-bottom to one of the corresponding spacing tokens
marginLeft	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-left to one of the corresponding spacing tokens
marginRight	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-right to one of the corresponding spacing tokens
marginTop	"spacing2Xs" "spacingXs" "spacingS" "spacingM" "spacingL" "spacingXl" "spacing2Xl" "spacing3Xl" "spacing4Xl" "none" sets margin-top to one of the corresponding spacing tokens
orientation	"horizontal" "vertical"	horizontal
stepStyle	"number" "icon"	number
testId	string A [data-test-id] attribute used for testing purposes

ProgressStepper.Step

Name	Type	Default
activeStep	number Private prop for the ProgressStepper component
className	string CSS class to be appended to the root element
labelText	string
orientation	"horizontal" "vertical" Private prop for the ProgressStepper component
state	"active" "error" "warning" "disabled" "complete" "incomplete"	incomplete
stepNumber	number Private prop for the ProgressStepper component
stepStyle	"number" "icon" Private prop for the ProgressStepper component
testId	string A [data-test-id] attribute used for testing purposes

Content guidelines

The progress stepper provides visual feedback to help guide the user through a workflow that involves linear steps
Each step has an optional label
Label text should be short, clear and concise

Accessibility

The ariaLabel prop for the ProgressStepper component is required. Provide a label that describes what the progress is about (e.g. App installation progress).
The aria-label provided for the each Step component communicates information about the step's number and type.

ProgressStepper

Alpha component

Import

Examples

Orientation

Step Styles

Labels

Interactive Example

Props (API reference)

ProgressStepper

Name

Type

Default

ProgressStepper.Step

Name

Type

Default

Content guidelines

Accessibility

Help improve this page