Get startedFoundationsPatternsComponentsTokensContentGet support
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.Support for the Long Term Support (LTS) version of the Design system will be available until September 2025. View the upgrade guide
AllAccordionCalloutContainerDetailsHero bannerListPopoverTableTextBadgeFilter chipModalNotification bannerProgress indicatorSkeleton loaderTooltipButtonButton groupCheckboxDate pickerDropdownFile uploaderIcon buttonInputRadioText areaDrawer FooterForm stepperHeaderMicrosite headerPaginationSide menuTabsBlockDividerForm itemGridIconsLinkSpacer
Form StepperGitHub issues
FigmaProvides a visual representation of a form through a series of steps.Related:Form item
Code playground
Page 1 content
Page 2 content
Page 3 content
Page 4 content
Stepper Properties
 Step Properties
Examples

Controlled Navigation

PreviousNext

The user needs to partially or completely finish a step to be able to move forward to the next step. • A step that is “Not started” will not be clickable. • A user cannot use the stepper to navigate to another page. • Clicking the Active step when you are on that step will do nothing. (no page refresh). To use the controlled type you must set a step value ≥ 1.

Step status

PreviousNext

The status of each step can be configured to either “complete” or “incomplete” using the status property.

Design
Detailed design documentation for this component can be found on its component page in Figma.
Accessibility
Accessibility documentation for this component can be found on its component page in Figma. More accessibility guidance for design and development is coming soon.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsDesign tokensContentSubmit an issue#design-system-supportContribute to the design systemRoadmapRelease notes