Stepper

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

2 samples
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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>
v3.0.3

Best practices

Below are important guidelines on using the Stepper component.

Correct Stepper complex workflow
Do use Stepper for complex workflows.
Avoid Stepper simple workflow
Avoid using Stepper for simple workflows.

Accessibility

Keyboard navigation

KeyFunction
Arrow leftMoves 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 rightMoves 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 downMoves 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 upMoves 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.
HomeMoves focus to first non-disabled calcite-stepper-item.
EndMoves focus to last non-disabled calcite-stepper-item.
SpaceSelects the currently focused calcite-stepper-item.
EnterSelects the currently focused calcite-stepper-item.
TabMoves 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 ShiftMoves 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

Correct Stepper writing
Do prefer brevity in Steppers.
Avoid Stepper writing
Avoid being too wordy in step headers.

API reference

Properties

PropertyAttributeDescriptionTypeDefault
iconiconWhen true, displays a status icon in the calcite-stepper-item heading.booleanfalse
layoutlayoutDefines the layout of the component."horizontal" | "horizontal-single" | "vertical""horizontal"
messageOverridesUse this property to override individual strings used by the component.{ label?: string; previousStep?: string; nextStep?: string; }
numberednumberedWhen true, displays the step number in the calcite-stepper-item heading.booleanfalse
numberingSystemnumbering-systemSpecifies the Unicode numeral system used by the component for localization."arab" | "arabext" | "latn"
scalescaleSpecifies the size of the component."l" | "m" | "s""m"
selectedItemread-onlySpecifies the component's selected item.HTMLCalciteStepperItemElement

Slots

NameDescription
default (unnamed)A slot for adding calcite-stepper-item elements.

Events

NameDescriptionBehavior
calciteStepperChangeFires when the active calcite-stepper-item changes.bubblescomposed
calciteStepperItemChange
deprecateduse calciteStepperChange instead or calciteStepperItemChange on items instead.
Fires when the active calcite-stepper-item changes.
bubblescomposed

Methods

NameDescriptionSignature
componentOnReadyCreate a promise that resolves once component is fully loaded.componentOnReady(): Promise<void>
endStepSet the last calcite-stepper-item as active.endStep(): Promise<void>
goToStepSet a specified calcite-stepper-item as active.goToStep(step: number): Promise<void>
nextStepSet the next calcite-stepper-item as active.nextStep(): Promise<void>
prevStepSet the previous calcite-stepper-item as active.prevStep(): Promise<void>
startStepSet the first calcite-stepper-item as active.startStep(): Promise<void>

Your browser is no longer supported. Please upgrade your browser for the best experience. See our browser deprecation post for more details.

You can no longer sign into this site. Go to your ArcGIS portal or the ArcGIS Location Platform dashboard to perform management tasks.

Your ArcGIS portal

Create, manage, and access API keys and OAuth 2.0 developer credentials, hosted layers, and data services.

Your ArcGIS Location Platform dashboard

Manage billing, monitor service usage, and access additional resources.

Learn more about these changes in the What's new in Esri Developers June 2024 blog post.

Close