Stepper

The Stepper component displays a wizard-like workflow by guiding users through the multi-step progression.

Import#


import { Stepper } from 'primereact/stepper';
import { StepperPanel } from 'primereact/stepperpanel';

Basic#

Stepper consists of one or more StepperPanel elements to encapsulate each step in the progress. The elements to navigate between the steps are not built-in for ease of customization, instead prevCallback and nextCallback events should be bound to your custom UI elements.

Content I


<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }}>
    <StepperPanel header="Header I">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
        </div>
        <div className="flex pt-4 justify-content-end">
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header II">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
        </div>
        <div className="flex pt-4 justify-content-between">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header III">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
        </div>
        <div className="flex pt-4 justify-content-start">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
        </div>
    </StepperPanel>
</Stepper>

Vertical#

Layout of the Stepper is configured with the orientation property that accepts horizontal and vertical as available options.

Content I


<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} orientation="vertical">
    <StepperPanel header="Header I">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
        </div>
        <div className="flex py-4">
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header II">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
        </div>
        <div className="flex py-4 gap-2">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header III">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
        </div>
        <div className="flex py-4">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
        </div>
    </StepperPanel>
</Stepper>

Linear#

When linear property is present, current step must be completed in order to move to the next step.

Content I


<Stepper ref={stepperRef} style={{ flexBasis: '50rem' }} linear>
    <StepperPanel header="Header I">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content I</div>
        </div>
        <div className="flex pt-4 justify-content-end">
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header II">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content II</div>
        </div>
        <div className="flex pt-4 justify-content-between">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
            <Button label="Next" icon="pi pi-arrow-right" iconPos="right" onClick={() => stepperRef.current.nextCallback()} />
        </div>
    </StepperPanel>
    <StepperPanel header="Header III">
        <div className="flex flex-column h-12rem">
            <div className="border-2 border-dashed surface-border border-round surface-ground flex-auto flex justify-content-center align-items-center font-medium">Content III</div>
        </div>
        <div className="flex pt-4 justify-content-start">
            <Button label="Back" severity="secondary" icon="pi pi-arrow-left" onClick={() => stepperRef.current.prevCallback()} />
        </div>
    </StepperPanel>
</Stepper>

Header#

Header position of the stepper can be customized using the headerPosition property. Default value is right.

Position top

Position right

Position left

Position bottom


<h5>Position top</h5>
<Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="top">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
<h5>Position right</h5>
<Stepper ref={(ref) => (stepperRef.current[0] = ref)} headerPosition="right">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
<h5>Position left</h5>
<Stepper ref={(ref) => (stepperRef.current[1] = ref)} headerPosition="left">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>
<h5>Position bottom</h5>
<Stepper ref={(ref) => (stepperRef.current[2] = ref)} headerPosition="bottom">
    <StepperPanel header="Header I"></StepperPanel>
    <StepperPanel header="Header II"></StepperPanel>
    <StepperPanel header="Header III"></StepperPanel>
</Stepper>

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 atab 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 andaria-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.