The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Stepper Indicator

Figma GitHub

Helps the user maintain context and directionality when advancing through a multi-step flow or feature; generally assembled as part of a larger stepper pattern.

A stepper indicator helps the user maintain context and directionality when advancing through a multi-step flow or feature, and in certain circumstances, could act as a navigational device between steps. It is generally assembled as part of a larger stepper pattern.

For practical accessibility purposes, consider a stepper (the whole component) to be a list of items, with each step being a list item.

As of this writing the HDS team publishes two separate (but related) Stepper Indicator components that serve different hierarchical purposes.

  1. The Stepper::Step::Indicator component: used in higher-order step-based flows that contain multiple steps that a user must complete sequentially.
  2. The Stepper::Task::Indicator component: used either on its own to denote smaller task-oriented flows or in combination with the Step indicator to list multiple tasks within a step.

Usage

When to use

  • As a visual decorator to assist in the status and context of a multi-step flow.
  • Within a larger stepper or step item pattern paired with a label and description.

When not to use

  • In isolation or not as part of a larger pattern.

Content

While the most common example of content within a stepper indicator is numerical (1, 2, 3), other types of sequential ordering may also be used (A, B, C).

This is only relevant for the Step Indicator, the Task Indicator does not accept a text property.

The stepper indicator is used to indicate the relational step number or value, helping the user maintain context in a multi-step flow or sequence. It should be used in larger stepper item patterns with an appropriate label, description, and visual language indicating directionality.

There are two types of indicators, step and task which can be used in conjunction, or separately depending on hierarchical needs or requirements.

Stepper::Step::Indicator

Basic use

1 
<Hds::Stepper::Step::Indicator @text="1" @status="incomplete" />

Adding interactivity

1 
<Hds::Stepper::Step::Indicator @text="1" @status="incomplete" @isInteractive={{true}} />

Indicating status

1 
<Hds::Stepper::Step::Indicator @text="1" @status="progress" @isInteractive={{true}} />

Indicating processing

<Hds::Stepper::Step::Indicator @text="1" @status="processing" @isInteractive={{true}} />

Rendering a complete step

<Hds::Stepper::Step::Indicator @text="1" @status="complete" @isInteractive={{true}} />

Stepper::Task::Indicator

Basic use

<Hds::Stepper::Task::Indicator @status="incomplete" />

Adding interactivity

<Hds::Stepper::Task::Indicator @status="incomplete" @isInteractive={{true}} />

Indicating status

<Hds::Stepper::Task::Indicator @status="progress" @isInteractive={{true}} />

Indicating processing

<Hds::Stepper::Task::Indicator @status="processing" @isInteractive={{true}} />

Rendering a complete task

<Hds::Stepper::Task::Indicator @status="complete" @isInteractive={{true}} />

Note: Since the indicator components are meant to be assembled into larger stepper item patterns, the component’s interactive states should be tied to the larger pattern. This includes hover, active, and focus.

Stepper::Step::Indicator

Here is the API for the Step::Indicator component:

Name
status
Type
enum
Values
  • incomplete (default)
  • progress
  • processing
  • complete
Name
isInteractive
Type
boolean
Values
  • false (default)
  • true
Description
By default the Indicator::Step is not interactive and has no hover state. Usage for this variant is generally recommended for onboarding-type sequences or list-item steps.
Name
text
Type
string
Description
Generally corresponds with the numerical value of the index of the item in an array of multiple steps.

Stepper::Task::Indicator

Here is the API for the Task::Indicator component:

Name
status
Type
enum
Values
  • incomplete (default)
  • progress
  • processing
  • complete
Name
isInteractive
Type
boolean
Values
  • false (default)
  • true

Anataomy

Step Indicator Anatomy

Step indicator

Element Usage
Text Required (indicates the step sequence)
Status Required
Is Interactive Optional (defaults to false)

Task indicator

Element Usage
Status Required
Is Interactive Optional (defaults to false)

Conformance rating

Not conformant

The Stepper Indicator components are not WCAG-conformant on their own.

Applicable WCAG Success Criteria

There is no specific WCAG Success Criteria applicable to the stepper indicator on its own. Since we are only providing the stepper indicator and not the entire stepper (at this time), authors are responsible to ensure WCAG conformance is met in any components they build.

Support

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

On this page: