Stepper
The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.
Import #
import { StepperModule } from 'primeng/stepper';Horizontal #
Stepper consists of a combination of StepList, Step, StepPanels and StepPanel components. The value property is essential for associating Step and StepPanel with each other.
Vertical #
Vertical layout requires StepItem as a wrapper of Step and StepPanel components.
Linear #
When linear property is set to true, current step must be completed in order to move to the next step.
Steps Only #
Use Stepper with a StepList only for custom requirements where a progress indicator is needed.
Template #
Stepper provides various templating options to customize the default UI design.
Accessibility #
Screen Reader
Stepper container is defined with the tablist role, as any attribute is passed to the container element aria-labelledby can be optionally used to specify an element to describe the Stepper. Each stepper header has a tab role and aria-controls to refer to the corresponding stepper content element. The content element of each stepper has tabpanel role, an id to match the aria-controls of the header and aria-labelledby reference to the header as the accessible name.
Tab Header Keyboard Support
| Key | Function |
|---|---|
| tab | Moves focus through the header. |
| enter | Activates the focused stepper header. |
| space | Activates the focused stepper header. |
