Steps

Overview

The steps component is a type of Wizard. Both are used to walk the user through a workflow process, one step at a time.

The steps can be used for multi-step workflows that are:

• Linear: meaning that there’s no branching in the workflow, there is only one path through the process.
• Short: usually only 5 steps or less.

The steps component displays a horizontal band with a number and a short text label for each step in the workflow. As the user progresses through the workflow, the current step lights up to let the user know where they are in the process. Only the UI elements for the current step display.

You can configure the component to either allow users to click a step header to jump to that step or you can turn off that feature so that users must interact with other elements within each step (say a Next button) in order to move forward or backwards through the workflow.

Regardless of whether you allow users to click step headers to jump to that step, you must also include some action button that allows the user to move to the next step, typically labeled “Next >”. Depending on the nature of the workflow, you may also want to include a “< Back” button to allow users to move backwards through the workflow.

Development

Web component development

Component reference

p-steps

Implementation

Include primeng in package.json, where x.y.z is the currently supported version number specified here. Use npm install to install this framework.

"primeng": "x.y.z",

Begin by importing the StepsModule module into your application.

import { StepsModule } from 'primeng/steps';

@NgModule({
    imports: [
        ...
        StepsModule,
        ...
    ]
})

export class AppModule() {}

In the TypeScript, import the MenuItem class. This is used to define each step in the process.

import { MenuItem } from 'primeng/api';

Declare an array of MenuItem objects. We’ll use this to define the process steps in a moment. Also declare a number that contains the index of the current step. Initialize that to zero.

    public stepItems: MenuItem[];
    public stepIndex: number = 0;

Define the steps in the workflow in the ngOnInit method. For each step, define the text label that displays for that step, as well as a handler that sets the stepIndex model property to the appropriate value when the user clicks that step.

ngOnInit() {
    this.stepItems = [{
        label: 'Shipping Address',
        command: (event: any) => {
            this.stepIndex = 0;
        }
    },
    {
        label: 'Billing Address',
        command: (event: any) => {
            this.stepIndex = 1;
        }
    },
    {
        label: 'Payment Method',
        command: (event: any) => {
            this.stepIndex = 2;
        }
    },
    {
        label: 'Shipping',
        command: (event: any) => {
            this.stepIndex = 3;
        }
    },
    {
        label: 'Confirm Order',
        command: (event: any) => {
            this.stepIndex = 4;
        }
    }];
}

The Back and Next buttons in your workflow will also decrement and increment the same stepIndex property used by the steps component.

In the HTML, place a p-steps element where the steps component should go. Bind the model attribute to the stepItems array, bind the activeIndex property to the stepIndex model property, and set readOnly to false if the user can click step headers to switch to that step, or true if the user should not be able to click step headers to switch to that step.

    <p-steps [model]="stepItems" [activeIndex]="stepIndex" [readonly]="false"></p-steps>

Below the steps component, add a separate div for each step in the process that includes the UI elements for that step. Use *ngIf to include the div for each step, based on the stepIndex property.

<div *ngIf="stepIndex == 0">
    . . .
</div>

Angular wrapper development

Wrapper reference

p-steps

Implementation

Include primeng in package.json, where x.y.z is the currently supported version number specified here. Use npm install to install this framework.

"primeng": "x.y.z",

Begin by importing the StepsModule module into your application.

import { StepsModule } from 'primeng/steps';

@NgModule({
    imports: [
        ...
        StepsModule,
        ...
    ]
})

export class AppModule() {}

In the TypeScript, import the MenuItem class. This is used to define each step in the process.

import { MenuItem } from 'primeng/api';

Declare an array of MenuItem objects. We’ll use this to define the process steps in a moment. Also declare a number that contains the index of the current step. Initialize that to zero.

    public stepItems: MenuItem[];
    public stepIndex: number = 0;

Define the steps in the workflow in the ngOnInit method. For each step, define the text label that displays for that step, as well as a handler that sets the stepIndex model property to the appropriate value when the user clicks that step.

ngOnInit() {
    this.stepItems = [{
        label: 'Shipping Address',
        command: (event: any) => {
            this.stepIndex = 0;
        }
    },
    {
        label: 'Billing Address',
        command: (event: any) => {
            this.stepIndex = 1;
        }
    },
    {
        label: 'Payment Method',
        command: (event: any) => {
            this.stepIndex = 2;
        }
    },
    {
        label: 'Shipping',
        command: (event: any) => {
            this.stepIndex = 3;
        }
    },
    {
        label: 'Confirm Order',
        command: (event: any) => {
            this.stepIndex = 4;
        }
    }];
}

The Back and Next buttons in your workflow will also decrement and increment the same stepIndex property used by the steps component.

In the HTML, place a p-steps element where the steps component should go. Bind the model attribute to the stepItems array, bind the activeIndex property to the stepIndex model property, and set readOnly to false if the user can click step headers to switch to that step, or true if the user should not be able to click step headers to switch to that step.

    <p-steps [model]="stepItems" [activeIndex]="stepIndex" [readonly]="false"></p-steps>

Below the steps component, add a separate div for each step in the process that includes the UI elements for that step. Use *ngIf to include the div for each step, based on the stepIndex property.

<div *ngIf="stepIndex == 0">
    . . .
</div>

Design

Figma design

The Steps pattern is very similar to the Wizard pattern design. Both patterns walk the user through a linear series of steps, prompting for a set of inputs for each step.

The Steps pattern displays a series of numbered step headers across the top, acting similar to the step links in the Wizard pattern. Each step header includes a title.

Back/Next buttons display at the top of the display block, enabling the user to move linearly through the Steps component.

The user can optionally click the step headers to jump directly to that step. This isn’t immediately intuitive to some users, so we use Back/Next buttons to provide a familiar, intuitive way for users to move forward and backwards through the process.

First, add a step bar component to the artboard. Size the step bar to fit all of the steps.

Next, add one active step component for the currently active step.

Then add one or more inactive step components for the other steps.

Do not change the width of the active/inactive step components; the corresponding dev components for the step headers have a fixed width and cannot be resized.

Adobe XD design

The Steps pattern is very similar to the Wizard pattern design. Both patterns walk the user through a linear series of steps, prompting for a set of inputs for each step.

The Steps pattern displays a series of numbered step headers across the top, acting similar to the step links in the Wizard pattern. Each step header includes a title.

Back/Next buttons display at the top of the display block, enabling the user to move linearly through the Steps component.

The user can optionally click the step headers to jump directly to that step. This isn’t immediately intuitive to some users, so we use Back/Next buttons to provide a familiar, intuitive way for users to move forward and backwards through the process.

First, add a step bar component to the artboard. Size the step bar to fit all of the steps.

Next, add one active step component for the currently active step.

Then add one or more inactive step components for the other steps.

Do not change the width of the active/inactive step components; the corresponding dev components for the step headers have a fixed width and cannot be resized.