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

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

Slots

Events

Methods

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