Steps

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

Basic

Interactive

Import via Module


import { Steps } from 'primereact/steps';

Import via CDN


<script src="https://unpkg.com/primereact/core/core.min.js"></script>
<script src="https://unpkg.com/primereact/steps/steps.min.js"></script>

MenuItem API

Steps uses the common menu item api to define its items, visit MenuModel for details.

Getting Started

TabMenu requires a collection of menuitems as its model.


const items = [
    {label: 'Personal'},
    {label: 'Seat'},
    {label: 'Payment'},
    {label: 'Confirmation'}
];


<Steps model={items} />

interactive

Items are readOnly by default, if you'd like to make them interactive then disable readonly, use command handlers of menuitem to respond to selection events and define activeIndex property along with the onSelect event to use it as a controlled component.


<Steps model={interactiveItems} activeIndex={activeIndex} onSelect={(e) => setActiveIndex(e.index)} readOnly={false} />


const interactiveItems = [
    {
        label: 'Personal',
        command: (event) => {
            toast.current.show({severity:'info', summary:'First Step', detail: event.item.label});
        }
    },
    {
        label: 'Seat',
        command: (event) => {
            toast.current.show({severity:'info', summary:'Seat Selection', detail: event.item.label});
        }
    },
    {
        label: 'Payment',
        command: (event) => {
            toast.current.show({severity:'info', summary:'Pay with CC', detail: event.item.label});
        }
    },
    {
        label: 'Confirmation',
        command: (event) => {
            toast.current.show({severity:'info', summary:'Last Step', detail: event.item.label});
        }
    }
];

Properties

Name	Type	Default	Description
id	string	null	Unique identifier of the element.
model	array	null	An array of menuitems.
activeIndex	number	0	Index of the active item.
readOnly	boolean	true	Whether the items are clickable or not.
style	string	null	Inline style of the component.
className	string	null	Style class of the component.

Events

Name	Parameters	Description
onSelect	event.originalEvent: Browser event event.item: Selected item instance event.index: Index of selected item instance	Callback to invoke when the new step is selected.