Socket
Book a DemoInstallSign in
Socket

@contentful/f36-progress-stepper

Package Overview
Dependencies
Maintainers
4
Versions
14
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@contentful/f36-progress-stepper

Forma 36: ProgressStepper component

latest
Source
npmnpm
Version
5.5.0
Version published
Maintainers
4
Created
Source

title: 'ProgressStepper' type: 'component' status: 'stable' isNew: true slug: /components/progress-stepper/ github: 'https://github.com/contentful/forma-36/tree/main/packages/components/progress-stepper' storybook: 'https://f36-storybook.contentful.com/?path=/story/components-progress-stepper--default' typescript: ./src/ProgressStepper.tsx,./src/Step/Step.tsx

ProgressStepper can be used to visually represent the division of a process into ordered steps

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.

Example of ProgressStepper with vertical orientation.

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.

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

Labels

Example of ProgressStepper with horizontal orientation with labels.

Example of ProgressStepper with vertical orientation with labels.

Interactive Example

Example of the ProgressStepper with buttons to move between steps.

Clickable Example

Example of the ProgressStepper with clickable steps.

Only previous steps clickable Example

Example of the ProgressStepper with only previous steps clickable.

Horizontal Label Width Limitation

When the ProgressStepper renders in the horizontal orientation with labels, the component will have extra width on the sides of the first and last steps. This extra width is necessary in order to accommodate the centering of the labels under each step. This example demonstrates this extra width so that consumers of this component can plan accordingly in designs, as the ProgressStepper component will not be the same width as the content area.

Props (API reference)

ProgressStepper

ProgressStepper.Step

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.

FAQs

Package last updated on 23 Sep 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts