Source: https://primereact.org/steps/

Introducing PrimeReact v11 Alpha 🥁Learn More

SearchK
10.9.7
FEATURES
API
THEMING
PASS THROUGH

Steps

Steps also known as Stepper, is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.

Import#

import { Steps } from 'primereact/steps';

Copy

Basic#

Steps requires a collection of menuitems as its model.

<Steps model={items} />

Copy

Controlled#

Steps can be controlled programmatically using activeIndex property.

123

<Steps model={items} />

Copy

Linear#

Steps is linear by default to enforce completion of a previus step to proceed, set readOnly as false for non-linear mode.

<Steps readOnly model={items} />

Copy

Interactive#

In order to add interactivity to the component, disable readOnly and use a binding to activeIndex along with onSelect to control the Steps.

<Toast ref={toast}></Toast>
<Steps model={items} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />

Copy

Template#

Steps offers item customization with the items template property that receives the item instance and returns an element.

<Steps model={items} activeIndex={activeIndex} readOnly={false} className="m-2 pt-4" />

Copy

Accessibility#

Screen Reader

Steps component uses the nav element and since any attribute is passed to the root implicitly aria-labelledby or aria-label can be used to describe the component. Inside an ordered list is used where the current step item defines aria-current as "step".

Keyboard Support

| Key | Function | | --- | --- | | tab | Adds focus to the active step when focus moves in to the component, if there is already a focused tab header then moves the focus out of the component based on the page tab sequence. | | enter | Activates the focused step if readonly is not enabled. | | space | Activates the focused step if readonly is not enabled. | | right arrow | Moves focus to the next step if readonly is not enabled. | | left arrow | Moves focus to the previous step if readonly is not enabled. | | home | Moves focus to the first step if readonly is not enabled. | | end | Moves focus to the last step if readonly is not enabled. |

Import
Basic
Controlled
Linear
Interactive
Template
Accessibility

PrimeReact 10.9.7 by PrimeTek