ProgressSteps

Molecule

Usage

The Progress Steps component visually represents a user's progress through a sequential process, such as a multi-step form or a tutorial.

• Use for linear processes with a clear start and end.
• Avoid for non-sequential or optional steps.
• Ensure the steps are clear and concise.
• The ProgressSteps can function as a navigation tool, enabling users to return to previously completed steps. This feature is particularly useful in processes where revisiting earlier steps is necessary for editing or reviewing purposes

INFO

Note: In order to test this component we simulate a button that takes the user to the corresponding next pages of the process. The button can only be clicked, once the corresponding step is completed (this would most likely be triggered by an event that is emitted when all necessary input has been given by the user).

Behaviour

• Users can click on any completed step to navigate back to it.
• The component automatically advances when a step is completed.
• Users may jump between completed steps without changing their completion status.
• If a change in a previous step invalidates subsequent steps, those steps are reset to Uncompleted (greyed out) and cannot be accessed until the flow is completed again in order.
• Previously entered values in subsequent steps are preserved as cached inputs, unless specific fields must be reset due to dependency on modified earlier steps.

Anatomy

1. Progress Step Item - depicts each individual step in the process. It can optionally be clickable and represent the clickable area. It consists of 3 parts:
2. Container - clickable area.
3. Status indicator - changes states visually depending on the status of the completion of the steps in the process. These are defined in each project individually.
4. Label - concisely and clearly describes each step in the process. It can only wrap down and have maximum of 3 lines. In cases where the words are too long try to find shorter alternatives to avoid letting the word to be too close to the next Progress Step Item Label. Progress Lines - connects the Progress Step Items and also indicates with color change the status of the completion of the step.

States

• Progress Step Item has Finished, Current and Unfinished states (steps in the process).
• Only Finished states can be clickable and therefore can have Hover, Active, Focus and Locked states.
• Unfinished states are unreachable (Locked) steps in the process, shown as faded.

Variants

• Label:
  Show or hide

INFO

Note: Text Input component’s width scales responsively to adapt to the viewport and screen size. Therefore maximum and minimum allowed width should be adjusted according to the use case in every application.

Properties

export interface ProgressStepsProps {
  modelValue: string;
  steps: ProgressStepItemProps[];
  labeled?: boolean;  //whether or not labels should be displayed
};

export interface ProgressStepItemProps {
  id: string;
  text?: string;
  disabled?: boolean;
  completed: boolean;
}

Configurations

Uncompleted

Current

Completed intermediate

Completed

Uncompleted

Current

Completed intermediate

Completed

Type	ProgressSteps
no label (hover)
labeled (no hover)

Developer notes

ProgressSteps holds a modelValue that refers to the current step id. It is a modelValue (two-way binding) because the id will be updated by the component in case the user clicks on a completed step.

const currentStep = ref<string>('current');

const steps: ProgressStepsProps['steps'] = $ref([
  { text: 'Uncompleted', id: 'uncompleted', disabled: false, completed: false },
  { text: 'Current', id: 'current', disabled: false, completed: false },
  { text: 'Completed intermediate', id: 'intermediate', disabled: false, completed: true },
  { text: 'Completed', id: 'completed', disabled: false, completed: true },
]);

<template>
  <ProgressSteps 
    v-model="currentStep" 
    :steps="steps" 
    :labeled="true"
  />
</template>