GC Design SystemComponents
GC Design System Start to use Page templates overviewBasic page Components overviewAlertBreadcrumbsButtonCardCheckboxesContainerDate inputDate modifiedDetailsError messageError summaryFieldsetFile uploaderFooterGridHeaderHeadingIconInputLanguage toggleLinkNoticePaginationRadiosScreenreader-onlySearchSelectSide navigationSignatureStepperTableTextTextareaTheme and topic menuTop navigation CSS Shortcuts overview Reset styles Responsive layoutState Box sizingContainer sizingDisplayOverflowPositionVisibility FontFont familyFont sizeFont styleFont weightLine heightLink colourLink sizeLink text decorationList styleText alignText colourText overflowText transformWord break MarginPadding Align contentAlign itemsAlign selfFlexFlex directionFlex growFlex shrinkFlex wrapGapGrid columnsGrid rowsJustify contentJustify itemsJustify selfOrderPlace contentPlace itemsPlace self Background colourBorder colourBorder radiusBorder styleBorder width Icon namesIcon sizeImage CursorPointer eventsTransition Styles overviewDesign tokensColourSpacingTypography Contact usGet InvolvedFind a demo

Stepper
<gcds-stepper>

Also called: progress indicator, steps. A stepper is a progress tracker for a multi-step process.
  • GitHub
  • Figma

Stepper component preview

On this page

Coding and accessibility for steppers

Use each step for a goal

Use the current-step attribute to indicate the step that the person is on and the total-steps attribute to indicate the overall number of steps.

Placing the stepper on the page

Use the tag attribute to assign the appropriate heading tag to the stepper. The stepper is able to render as either a h1, h2 or h3.

Use valid properties

Component properties have built-in validation. Required properties or properties prone to misuse will be validated. If there are any validation errors, the component will be non-functional and won’t render. Review the browser’s console for details and adjust the properties accordingly to ensure proper functionality.

Examples

Explore the different ways you can configure the component. Each example shows a working implementation and ready-to-copy code.

In this section

Essential attributes

These attributes are needed for the component to function correctly.

current-step

The current-step attribute defines the current step. 
<gcds-stepper current-step="1" total-steps="4">
Section title
</gcds-stepper>

total-steps

The total-steps attribute defines the total number of steps. 
<gcds-stepper current-step="1" total-steps="4">
Section title
</gcds-stepper>

Optional attributes

These attributes allow you to customize or extend the component’s behaviour and presentation.

tag

The tag attribute sets the HTML heading element for the stepper. By default, it is set to h2. 
<gcds-stepper current-step="1" total-steps="4" tag="h3">
Section title
</gcds-stepper>

Slots

The default slot allows you to inject custom content into the component’s primary content area, and named slots, into specific areas.

default

The default slot is for placing the heading text. 
<gcds-stepper current-step="1" total-steps="4">
Section title
</gcds-stepper>
Code builder Generate an instance of the component you need by selecting its code properties.
  • Explore by choosing different code values to generate the instance you want.
  • Get the code and pull it into your environment.
  • Add any copy you need to the component (like text for a label).
Note: The code builder uses English for all code elements, which follows standard practice. Section title
Help us improve Have questions or a request? Give feedback on our contact form. Something's wrong? Raise it through GitHub with an account. You'll have access to the team's direct responses, progress made on your issue, and issues raised by others. Give feedback Report an issue on GitHub
2026-05-20