Stepper List

Usage

When to use

• In onboarding, account creation, or initial setups that are broken up into multiple steps.
• To communicate what has and has not been completed in a multi-step flow.
• For progress that does not require the user to remain on the current page to complete.

When not to use

• When the user needs to remain within the step to complete it, use the Stepper Nav.
• For simple forms or when progress doesn't need to be tracked, use structured page content.

Content

The Stepper List includes a title, an optional description, and a generic slot for content.

Title

Titles provide an overview to help users understand what tasks need to be completed and their purpose within the flow. Titles are required and should be brief.

Description

Descriptions are optional. They can be used to provide additional brief context. If used, we recommend providing a description for all steps.

Progressive disclosure

We recommend showing the contents of the in-progress step while hiding the contents of other steps. This narrows the focus to the current step and ensures steps are completed in order. However, context from the previous step is sometimes needed for the user to complete the next step, so use your best judgment.

Using processing status

Set the status as processing to provide the user with immediate feedback when data is submitted within a step.

If an error occurs, the error should be displayed within the step and the status should remain in progress.

How to use this component

<Hds::Stepper::List @ariaLabel="Basic usage" as |S|>
  <S.Step>
    <:title>One</:title>
  </S.Step>
  <S.Step>
    <:title>Two</:title>
  </S.Step>
  <S.Step>
    <:title>Three</:title>
  </S.Step>
</Hds::Stepper::List>

Indicating status

To change the status of a Step, set the @status argument in the [S].Step contextual component. The default status value is incomplete.

<Hds::Stepper::List @ariaLabel="Indicating status" as |S|>
  <S.Step @status="complete">
    <:title>Completed step</:title>
  </S.Step>
  <S.Step @status="progress">
    <:title>Current step</:title>
  </S.Step>
  <S.Step>
    <:title>Upcoming step</:title>
  </S.Step>
</Hds::Stepper::List>

A processing status is used to indicate an ongoing process in the background, such as the user's data being submitted.

<Hds::Stepper::List @ariaLabel="Processing status" as |S|>
  <S.Step @status="complete">
    <:title>Completed step</:title>
  </S.Step>
  <S.Step @status="processing">
    <:title>Current step</:title>
  </S.Step>
  <S.Step>
    <:title>Upcoming step</:title>
  </S.Step>
</Hds::Stepper::List>

Additional information

Using the named <:title> block is required. Additional information for a step is added through the named blocks <:description> and <:content>.

<Hds::Stepper::List @ariaLabel="Additional information" as |S|>
  <S.Step @status="complete">
    <:title>Completed step</:title>
    <:description>Step description</:description>
  </S.Step>
  <S.Step @status="progress">
    <:title>Current step</:title>
    <:description>Step description</:description>
    <:content>
      <Hds::Button @text="Do step action" />
    </:content>
  </S.Step>
  <S.Step>
    <:title>Upcoming step</:title>
    <:description>Step description</:description>
  </S.Step>
</Hds::Stepper::List>

Component API

Stepper::List

Contextual components

[S].Step

The Stepper::List::Step component, yielded as contextual component.

Anatomy

States

Conformance rating

When used as recommended, there should not be any WCAG conformance issues with this component.

Best Practices

Using processing status

The @status value of "processing" should only be used on a step in relation to a loading or background process or if user interaction is halted until a process completes. Using this status outside these use cases is not conformant.

Applicable WCAG Success Criteria

Support

If any accessibility issues have been found within this component, let us know by submitting an issue.

4.18.1

Added new Stepper List component