Stepper

Examples

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

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

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

Best practices:

1. Steppers often contain forms and form controls. If validation errors inside of a stepper's form prevents users from moving to another step, make sure that your form controls communicate error messages to assistive technology. This helps the user know why they can't advance to another step.

Steppers should be used when:

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

Steppers should not be used when:

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

Behaviour
The value should change by a defined step amount (e.g., 1) with each button press.

Accessibility guidelines

Aria attributes

1. Set aria-current="step" to indicate the currently selected step.
2. Set aria-disabled="true" when the step is disabled.

Keyboard accessibility

1. Tab or Shift-Tab to move focus forward and backwards between steps.
2. Enter to navigate to the focused step. Only completed steps can be navigated to.

Focus indicator

1. Ensure that focus indicators are highly visible and distinct when any interactive element within the stepper (e.g., increment/decrement buttons or the input field) is focused.
2. Ensure a logical and intuitive focus order, usually moving from the decrement button to the input field and then to the increment button.
3. When the value is updated, maintain focus on the active element to avoid disrupting the user experience.

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;