Stepper

Used to inform users which step they are at in a form or a process

Examples

1

Marker title

2

Marker title

3

Marker title

HTML React Web Component
<div class="sgds stepper">
    <div class="stepper-item is-completed">
        <div class="stepper-marker">1</div>
        <div class="stepper-detail">
            <p><b>Marker title</b></p>
        </div>
    </div>
    <div class="stepper-item is-active">
        <div class="stepper-marker">2</div>
        <div class="stepper-detail">
            <p><b>Marker title</b></p>
        </div>
    </div>
    <div class="stepper-item">
        <div class="stepper-marker">3</div>
        <div class="stepper-detail">
            <p><b>Marker title</b></p>
        </div>
    </div>
</div>
View on React storybook View on Web component storybook

Anatomy

Stepper Anatomy
  1. Step number: Indicate the sequence of step.
  2. Marker title: Label that indicates the purpose of the steps.
  3. Track: A bar to show the progress through a set of steps.

Spacing

Stepper Spacing

Within the stepper
Ensure that there is a min 32px horizontal spacing between dropdown item.
Ensure that there is a min of 4px vertical spacing between the marker icon and marker title.

Usage guidelines

Steppers should be used when:

  • There are multiple steps in a form where content can be divided into logical steps.

Steppers should not be used when:

  • Form is short. If a form or process has fewer than three sections, there is no need to use a stepper.

Usability guidelines

Keep marker title short and concise
Use labels that clearly indicate the purpose of the step and keep it as short as 1 to 2 words.

Logical ordering
Display the steps in order from left to right. Indicate to the user that they are performing a multistep process, and show the progress using the different states. Allow the user to return to a previous step to make ammendment.

Indicate the current step
Inform user of their current step within the process. This helps the user to know where they are in relation to where they have beem, and what sections are to follow. Use validation to confirm that a previous step has been completed.

Stepper design tokens

$steps-maker-default-color: $gray-400 !default;
$steps-marker-default-border: .25rem solid $white !default;
$steps-default-color: $gray-300 !default;
$steps-completed-color: $primary !default;
$steps-active-color: $primary !default;
$steps-divider-height: .25rem !default;

Last updated 22 November 2023
Home


Latest version 2.2.0