Intelligence Community Design System

An example of the stepper component.

Use the default stepper when you have the available space.

Use the compact variant for compact layouts or processes with many steps.

Use steppers when a multi-step linear process is required. Steps are displayed from left to right and show the direction of movement through the process.

Always indicate which step the user is currently on. This gives a sense of control and describes their position in the process in relation to where they have been, as well as how much they have left to do.

Don't use the stepper to indicate a non-linear process where steps can be completed in any order. Linear processes require each step to be completed in order.

Steps are single elements that together form the stepper. Steps have four different states:

Always align steppers to the left and place them above the main body content of the page.

When a stepper is too large to fit comfortably within its container, it will switch to use the compact stepper. This shows the current step along with its status, as well as the next step in the process.

Use the heading to describe each step concisely in one or two words. Avoid using lengthy headings.

When a stepper is used, always use page titles and section headings on the page content itself.

Hide step information only if the step content is clearly labelled itself. Do not omit step labels if no headings are provided in the step content.

Set a status to show whether the step is required or optional in the subheading. Override the subheading text to provide a custom message.

Validate each step as the user moves through the process. Use the standard error handling approach to display inline alert and error messages if the user attempts to proceed to the next step without first completing the current step correctly.