Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllAccordionBadgeBlockButtonButton groupCalloutCheckboxContainerDate pickerDetailsDividerDropdownFile uploaderFilter chipFooterForm itemForm stepperGridHeaderHero bannerIconsIcon buttonInputListMicrosite headerModalNotification bannerPaginationPopoverProgress indicatorRadioSide menuSkeleton loadingSpacerTableTabsTextText areaTooltip

Form Stepper

Provides a visual representation of a form through a series of steps.

Related components: Form item
Code examples
Page 1 content
Page 2 content
Page 3 content
Page 4 content

Controlled Navigation

The user needs to partially or completely finish a step to be able to move forward to the next step. In this case:

  • 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

PreviousNext

Step status

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

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 startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes