Steppers are used to show context and linear progress through a workflow.
Overview
Stepper has the ability to display a variety of applications with Stepper Items, such as completed steps. Functionally similar to Tabs, Stepper switches content in the display based on which step the user is on. Stepper can be used in vertical or horizontal layouts.
Usage
- Multiple step workflows
- Onboarding experiences
Sample
<calcite-stepper numbered>
<calcite-stepper-item heading="Add info" selected>
<calcite-notice width="full" open>
<div slot="title">Step 1 content</div>
</calcite-notice>
</calcite-stepper-item>
<calcite-stepper-item heading="Add data">
<calcite-notice width="full" open>
<div slot="title">Step 2 content</div>
</calcite-notice>
</calcite-stepper-item>
<calcite-stepper-item heading="Add images">
<calcite-notice width="full" open>
<div slot="title">Step 3 content</div>
</calcite-notice>
</calcite-stepper-item>
<calcite-stepper-item heading="Review">
<calcite-notice width="full" open>
<div slot="title">Step 4 content</div>
</calcite-notice>
</calcite-stepper-item>
</calcite-stepper>
Best practices
Below are important guidelines on using the Stepper component.
Accessibility
Keyboard navigation
Key | Function |
---|---|
Arrow left | Moves focus to the previous non-disabled calcite-stepper-item . If the current focus and selection is the first calcite-stepper-item , focus will cycle to the last calcite-stepper-item . |
Arrow right | Moves focus to the next non-disabled calcite-stepper-item . If the current focus and selection is the last calcite-stepper-item , focus will cycle to the first calcite-stepper-item . |
Arrow down | Moves focus to the next non-disabled calcite-stepper-item . If the current focus and selection is the last calcite-stepper-item , focus will cycle to the first calcite-stepper-item . |
Arrow up | Moves focus to the previous non-disabled calcite-stepper-item . If the current focus and selection is the first calcite-stepper-item , focus will cycle to the last calcite-stepper-item . |
Home | Moves focus to first non-disabled calcite-stepper-item . |
End | Moves focus to last non-disabled calcite-stepper-item . |
Space | Selects the currently focused calcite-stepper-item . |
Enter | Selects the currently focused calcite-stepper-item . |
Tab | Moves focus to next non-disabled calcite-stepper-item . If the currently focused calcite-stepper-item is the last calcite-stepper-item , focus will leave the component. |
Tab and Shift | Moves focus to previous non-disabled calcite-stepper-item . If the currently focused calcite-stepper-item is the first calcite-stepper-item , focus will leave the component. |
Writing and copy

API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
icon | icon | When true , displays a status icon in the calcite-stepper-item heading. | boolean | false |
layout | layout | Defines the layout of the component. | "horizontal" | "horizontal-single" | "vertical" | "horizontal" |
messageOverrides | Use this property to override individual strings used by the component. | {
label?: string;
previousStep?: string;
nextStep?: string;
} | ||
numbered | numbered | When true , displays the step number in the calcite-stepper-item heading. | boolean | false |
numberingSystem | numbering-system | Specifies the Unicode numeral system used by the component for localization. | "arab" | "arabext" | "latn" | |
scale | scale | Specifies the size of the component. | "l" | "m" | "s" | "m" |
selectedItem | Specifies the component's selected item. | HTMLCalciteStepperItemElement |
Slots
Name | Description |
---|---|
default (unnamed) | A slot for adding calcite-stepper-item elements. |
Events
Name | Description | Behavior |
---|---|---|
calciteStepperChange | Fires when the active calcite-stepper-item changes. | |
calciteStepperItemChange | calciteStepperChange instead or calciteStepperItemChange on items instead.calcite-stepper-item changes. |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
endStep | Set the last calcite-stepper-item as active. | endStep(): Promise<void> |
goToStep | Set a specified calcite-stepper-item as active. | goToStep(step: number): Promise<void> |
nextStep | Set the next calcite-stepper-item as active. | nextStep(): Promise<void> |
prevStep | Set the previous calcite-stepper-item as active. | prevStep(): Promise<void> |
startStep | Set the first calcite-stepper-item as active. | startStep(): Promise<void> |