ProgressSteps

Molecule

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.

Behavior:

• 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.

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).

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

const modelValue = defineModel<ProgressStepItemProps['id']>({ required: true });

Properties

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

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

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:
   1. Container - clickable area.
   2. 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.
   3. 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.
2. 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

Developer notes

ProgressSteps holds a modelValue that refers to the current step id. It is two-way bound because the id is updated by the component when the user clicks a completed step.

<script setup lang="ts">
import { ref } from 'vue';
import { ProgressSteps, type ProgressStepsProps } from '@pohlcon/design-system';

const currentStep = ref('current');

const steps = ref<ProgressStepsProps['steps']>([
  { 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 },
]);
</script>

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