React Steps

React Steps component is an indicator for the steps in a workflow. Layout of steps component is optimized for responsive design.

Setup

Refer to PrimeReact setup documentation for download and installation steps for your environment.

Import

import {Steps} from 'primereact/steps';

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});
        }
    }
];

Theming

Steps supports various themes featuring Material, Bootstrap, Fluent as well as your own custom themes via the Designer tool.

Resources

Visit the PrimeReact Steps showcase for demos and documentation.