Stepper

Overview
Specs
Guidelines

Component

A Stepper is a UI component that guides users through a step-by-step process, such as a form or a wizard. It typically consists of a series of numbered or labeled steps that users can navigate sequentially. Each step may contain specific actions or inputs that the user needs to complete before moving on to the next step. Steppers help users understand their progress within a process and provide clear direction on what actions to take next.

1: Status Indicator
2: Active Step Icon
3: Label
4: Inactive Step

Used for:

Tasks with three or more steps

Steppers balance structure and simplicity, effectively guiding users through multi-step workflows, such as sign-ups, checkouts, or onboarding experiences.

Progress tracking

When completing long forms, such as e-commerce checkouts, onboarding or visa applications, steppers help users track their progress.

Enhancing linear navigation

Steppers can help complement standard back/next navigation.

Validating inputs before progression

Steppers can be used when the user’s inputs must be validated before moving on to the next step.

Don’t use for:

Single-step processes

If a process or task can be completed in one or two steps without the need for further segmentation or guidance, the use of a Stepper may be unnecessary and could introduce unnecessary complexity.

Frequent updates or changes

If the steps in a process are subject to frequent updates or changes, maintaining a Stepper interface could become cumbersome. In such cases, a more flexible or dynamic navigation approach may be preferable.

Flexible navigation

If there is no order in which the process should be carried out, the implementation of a Stepper is probably unnecessary.

Overly granular tasks

Breaking a task into too many small steps can overwhelm users and hinder, rather than facilitate, their progress.

Demo

Access the Figma file and inspect the element using Dev Mode.

Open Figma

Last Update

10/04/2025

Updated Stepper component;
Updated guidelines to reflect component changes.

Progress Circle

A Progress Circle is a graphical representation that provides feedback about the duration and progression of a process …

Progress Bar

Progress Bars provide users with real-time feedback on the status of ongoing operations …

Label

A Label serves as a crucial element for enhancing the clarity and usability of a digital interface …

Selected

Uncompleted Step

.selected-step{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  fill: var(--Theme-Theme-100);
  label {
    color: var(--Theme-Theme-100);
  }
}

Completed Step

.filled-selected-step{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  icon {
    icon: check;
    color: var(--Greys-Grey-1);
  }
  label {
    color: var(--Theme-Theme-100);
  }
}

Not selected

Uncompleted Step

.inactive-step{
  border-radius: var(--rounded);
  border-color: var(--Greys-Grey-7);
  label {
    color: var(--Greys-Grey-7);
  }
}

Completed Step

.filled-step{
  border-radius: var(--rounded);
  fill: var(--Theme-Theme-100);
  icon {
    icon: check;
    color: var(--Greys-Grey-1);
  }
  label {
    color: var(--Greys-Grey-7);
  }
}

States

Enabled

Inactive

inactive-step-enable{
  border-radius: var(--rounded);
  border-color: var(--Grey-Grey-6);
  label {
    color: var(--Greys-Grey-7);
  }
}

Current Step

selected-step-enable{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  label {
    color: var(--Theme-Theme-100);
  }
}

Filled Current Step

filled-selected-step-enable{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  icon {
    icon: check;
    color: var(--Theme-Theme-100);
  }
  label {
    color: var(--Theme-Theme-100);
  }
}

Filled Step

filled-step-enable{
  border-radius: var(--rounded);
  fill: var(--Theme-Theme-100);
  icon {
    icon: check;
    color: var(var(--Greys-Grey-1);
  }
  label {
    color: var(--Greys-Grey-7);
  }
}

Hover

Inactive Step

inactive-step-hover{
  border-radius: var(--rounded);
  border-color: var(--Greys-Grey-6);
  fill: var(--Theme-Theme-10);
  label {
    color: var(--Greys-Grey-7);
  }
}

Current Step

selected-step-hover{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  fill: var(--Theme-Theme-10);
  label {
    color: var(--Theme-Theme-100);
  }
}

Filled Current Step

filled-selected-step-hover{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  fill: var(--Theme-Theme-10);
  icon {
    icon: check;
    color: var(--Theme-Theme-100);
  }
  label {
    color: var(--Theme-Theme-100);
  }
}

Filled Step

filled-step-hover{
  border-radius: var(--rounded);
  fill: var(--Theme-Theme-80);
  icon {
    icon: check;
    color: var(var(--Greys-Grey-1);
  }
  label {
    color: var(--Greys-Grey-7);
  }
}

Pressed

Inactive Step

inactive-step-pressed{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-100);
  fill: var(--Theme-Theme-20);
  label {
    color: var(--Theme-Theme-100);
  }
}

Current Step

selected-step-pressed{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-Highlight);
  fill: var(--Theme-Theme-20);
  label {
    color: var(--Theme-Theme-100);
  }
}

Filled Current Step

filled-selected-step-pressed{
  border-radius: var(--rounded);
  border-color: var(--Theme-Theme-Highlight);
  fill: var(--Theme-Theme-20);
  icon {
    icon: check;
    color: var(--Theme-Theme-100);
  }
  label {
    color: var(--Theme-Theme-100);
  }
}

Filled Step

filled-step-pressed{
  border-radius: var(--rounded);
  fill: var(--Theme-Theme-Highlight);
  icon {
    icon: check;
    color: var(var(--Greys-Grey-1);
  }
  label {
    color: var(--Theme-Theme-100);
  }
}

Error

Inactive Step

inactive-step-error{
  border-radius: var(--rounded);
  border-color: var(--Error-Error-100);
  label {
    color:var(--Error-Error-100);
  }
}

Current Step

selected-step-error{
  border-radius: var(--rounded);
  border-color: var(--Error-Error-100);
  label {
    color:var(--Error-Error-100);
  }
}

Filled Current Step

filled-selected-step-error{
  border-radius: var(--rounded);
  border-color: var(--Error-Error-100);
  icon{
    icon: error;
    color: var(--Error-Error-100);
  }
  label {
    color:var(--Error-Error-100);
  }
}

Filled Step

filled-step-error{
  border-radius: var(--rounded);
  fill: var(--Error-Error-100);
  icon{
    icon: error;
    color: var(--Greys-Grey-1);
  }
  label {
    color:var(--Error-Error-100);
  }
}

Disabled

Without Icon

disabled {
  border-radius: var(--rounded);
  fill: var(--Greys-Grey-6);
  label {
    color:var(--Greys-Grey-6);
  }
}

With Error Icon

disabled-icon{
  border-radius: var(--rounded);
  fill: var(--Greys-Grey-6);
  icon{
    icon: error;
    color: var(--Greys-Grey-6);
  label {
    color: var(--Greys-Grey-6);
  }
}

Useful links

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Navigation

As Steppers are tools intended to break tasks into multiple steps, it’s essential to allow users to navigate between them. This is primarily achieved through the interface.

Where appropriate, Steppers should also be responsive. Users should be able to click on a specific step to jump directly to it, allowing them to skip several steps at once, or to move on to a previous step that has already been completed.

Ensure that all interfaces in which Steppers are implemented must provide a way for users to move forwards and backwards between steps, such as Next/Previous buttons.

States

The Stepper has multiple states, each serving a specific purpose depending on the situation.

Enabled

This state is applied to any step the user is expected to interact with (or has already interacted with).

Hover

The hover state is applied when a user’s mouse cursor is hovering over the progress indicator step.

Pressed

This state is used when a user presses the progress indicator step, showing that they have successfully navigated to the intended step.

Error

A step may be in error when a user has entered invalid or incomplete information. A server-side error may also have occurred. Provide clear information about the error and guidance on how to resolve the issue.

Disabled

If users are unable to interact with a step -either because of an issue or because they shouldn’t – the step should be disabled, preventing the use of all other states.

For guidelines on how to correctly represent these states, refer to the Specs segment of this article.

Ensure users can’t move on to the next step without completing all the required actions.

Don’t

Use the error state on the first step.

Variations

Variations help convey important information to users, while also providing greater flexibility based on where Steppers are implemented.

Step

Selected

Applied when the user is interacting with the information in that step. When the step is complete, the component should reflect that information.

Not Selected

A step is not selected if the user hasn’t interacted with it or if they have completed the required information and moved on to the next step. Whenever possible, use validation to confirm that a step has been completed before the user continues.

Filled

This Stepper variation represents steps the user has completed. It applies to both selected and not selected steps, each with its own style.

Don’t

Revert the filled variation. When users return to previously completed steps, the Stepper should remain filled, unless the mandatory requirements are no longer met.

Label

Show/Hide

Labels are crucial as they give users context about the tasks they’re engaging with. Whenever possible, every step should be labeled. However, in cases where simplicity is preferred, we offer a variation that hides the label for unselected steps.

Position

Depending on the UI element the Stepper is applied to, adjusting the label’s position might be helpful. We offer three variations: Default, Top, and Bottom, as shown in the example image.

Include the step title elsewhere in the interface if can’t place it in the Stepper.

Responsiveness

Completed

In some cases, users may have to go back to a previously completed form or document. The completed variation enables navigation between steps, ensuring they remain correctly represented.

Size

Since Steppers are used in various situations, we offer four size variations to ensure they fit well in each case: Large, Regular, Small, and Extra Small, with the latter specifically designed for mobile interfaces.

Same step with non complete and complete variations

Position

Steppers are essential for keeping users aware of their progress in a task. Therefore, they must be placed in such a way as to ensure maximum visibility.

By default, they should be placed at the top of the interface which they belong.

Their alignment – whether centered, to the left, or to the right – can vary depending on where they are implemented.

Width

Due to the large number of interfaces in which Steppers can be implemented, they are designed to be flexible. However, there are some restrictions to bear in mind.

The connector line separating each step must be at least 16 px, except for the extra-small variation. This variation is designed for mobile devices, where space is limited and the Stepper component is not intended to be interactive. In this case, there should be 8 px between each step.

The connector line is limited to a maximum width of 200 px. This prevents Steppers with fewer steps from looking awkwardly long when inserted into containers that fill a large interface.

Don’t

Use Steppers for tasks with two or fewer steps.

Don’t

Divide a task into more than 10 steps.

Label

Ensure each label succinctly communicates the user’s task for each step, ideally in one or two words.

Use the {verb} + {noun} content structure to clearly indicate the action of the step, such as “Configure IdP” or “Define endpoints.” If universally understood, a single word like “Cart,” “Shipping,” or “Payment” is enough.

Avoid ambiguous terms like “Processing.” Consider numbering each step to enhance progression clarity.

When space is limited, choose to rephrase the label or truncate it with an ellipsis. Additionally, use tooltips to convey any supplementary information.

Caution

Avoid overly complicated names for each step, as labels have a maximum width of 120 px.

Use tooltips if the step name doesn’t fit on the label.

Component

Used for:

Don’t use for:

Demo

Last Update

Progress Circle

Progress Bar

Label

Step Variations

Selected

Not selected

States

Enabled

Hover

Pressed

Error

Disabled

Useful links

Navigation

States

Variations

Step

Label

Responsiveness

Position

Width

Label

Case Studies

Understanding the Disabled State

Release v1.3

Release v1.2

Outline

About

Resources

Privacy

Stepper

Component

Used for:

Don’t use for:

Demo

Last Update

Related

Progress Circle

Progress Bar

Label

Step Variations

Selected

Not selected

States

Enabled

Hover

Pressed

Error

Disabled

Useful links

Navigation

States

Variations

Step

Label

Responsiveness

Position

Width

Label

Case Studies

Understanding the Disabled State

Release v1.3

Release v1.2

Outline