Progress indicator

import { ... } from '@ag.ds-next/react/progress-indicator';

<ProgressIndicator
	items={[
		{ href: '#', label: 'Introduction', status: 'done' },
		{ href: '#', label: 'Organisations', status: 'started' },
		{ href: '#', label: 'Business contacts', status: 'doing' },
		{ href: '#', label: 'Case studies', status: 'todo' },
		{ href: '#', label: 'Attachments', status: 'blocked' },
	]}
/>

Progress indicators are used to show users how many steps are needed to complete a form and where they are in the process of completing it. This helps users know how much is left to do and how far along they are.

Progress indicators can be applied to larger tasks that can be completed in any order and returned to at a later date, like doing a tax return or applying for a driver's licence.

Progress indicators can be applied to multi-step forms if the form has a known number of steps to be completed. ¹

Avoid adding or removing pages to a multi-step form where a progress indicator is used as this can confuse and mislead users. Consider another approach if the number of steps might change due to user input. ²

Do

• display steps in order from top to bottom
• allow users to navigate to any step
• use in forms and multi-page processes
• use for processes of 2 - 10 steps
• always present mobile menu closed by default
• pair with Task list if nesting is required
• ensure step names match H1s and truncate if long
• keyword frontload
• group related form fields.

Don't

• dynamically or conditionally change the number of steps in a progress indicator list
• use for fewer than 2 steps
• disable steps - allow users to navigate to pages and use Page alerts to indicate a step is not available yet
• have any other components in the left-hand column
• add the step number to the text - list only the action the user needs to take
• mix with other navigation patterns - for example, Side nav
• change labels or icons
• make progress indicators a sticky nav item as this may cause reading order issues.

Background

The background of the Progress indicator must match the background it is being placed on.

If the Progress indicator is placed on a bodyAlt background, please set the background prop to bodyAlt.

Status

The status prop can be used to indicate the status of each item. The following values are available:

Buttons

If an item does not specify a href attribute a button element will be rendered. This enables you to reponds to various mouse events such as onClick.

<ProgressIndicator
	items={[
		{ onClick: console.log, label: 'Introduction', status: 'done' },
		{ onClick: console.log, label: 'Organisations', status: 'started' },
		{ onClick: console.log, label: 'Business contacts', status: 'doing' },
		{ onClick: console.log, label: 'Case studies', status: 'todo' },
		{ onClick: console.log, label: 'Attachments', status: 'blocked' },
	]}
/>

Notes

1. W3C Multi-page Forms

2. U.S. Web Design System (USWDS) Step indicator

Related components

• Task list – Task list is a navigation tool that show users what input is required to complete a task or transaction.