Stepper

Calcite Steppers are used to show context and linear progress through a workflow.

Overview

Stepper is a visually robust workflow navigation component. Stepper has the ability to display incomplete steps, complete steps, errors, icons, step numbers, and descriptions to fit a variety of applications. Functionally similar to Tabs, Stepper switches content in the view based on which step the user is on. Stepper can be used in vertical or horizontal layouts.

Usage

  • Multi-step workflows
  • Onboarding experiences (preferably inside a Modal)
  • "What's new" experiences (preferably inside a Modal)

Sample

Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction
Show code snippetCopy code snippet
Edit sample on Codepen
v1.0.0-beta.83
Toggle preview themeToggle preview direction

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 leftMove focus to previous non-disabled step
Arrow rightMove focus to next non-disabled step
HomeMove focus to first non-disabled step
EndMove focus to last non-disabled step
SpaceMake currently focused step active
EnterMake currently focused step active
TabMove focus to next non-disabled step. If the currently focused step is the last step, the focus will leave the component
Tab and ShiftMove focus to previous non-disabled step. If the currently focused step is the first step, the 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

calcite-stepper
v1.0.0-beta.83

Properties

PropertyAttributeDescriptionTypeValues
iconicon

optionally display a status icon next to the step title

booleanA boolean property should be present, or not
truefalse
layoutlayout

specify the layout of stepper, defaults to horizontal

typedChoose from a set of typed values
gridhorizontal (default)vertical
numberednumbered

optionally display the number next to the step title

booleanA boolean property should be present, or not
truefalse
scalescale

specify the scale of stepper, defaults to m

typedChoose from a set of typed values
lm (default)s

Methods

NameDescriptionSignatureReturns
endStep

set the last step as active

endStep() => Promise<void>Promise<void>
goToStep

set the requested step as active

goToStep(step: number) => Promise<void>Promise<void>
nextStep

set the next step as active

nextStep() => Promise<void>Promise<void>
prevStep

set the previous step as active

prevStep() => Promise<void>Promise<void>
startStep

set the first step as active

startStep() => Promise<void>Promise<void>

Slots

NameDescription
default (unnamed)

A slot for adding `calcite-stepper-item`s.

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