Components

Steps

An interactive representation of a user’s progress through a series of discrete steps, with the Wizard component as its non-interactive counterpart.

Basic usage

Steps renders a <nav> with an ordered list of steps. Each step is a Steps.Item. Mark the current step with isSelected and handle navigation with onClick.

import {useState} from 'react'
import {Steps} from '@pleo-io/telescope'


const steps = ['Forwarding', 'Scanning', 'Payment', 'Export']


const ImportSteps = () => {
    const [currentStepIndex, setCurrentStepIndex] = useState(0)


    return (
        <Steps>
            {steps.map((step, index) => (
                <Steps.Item
                    key={step}
                    isSelected={currentStepIndex === index}
                    onClick={() => setCurrentStepIndex(index)}
                >
                    {step}
                </Steps.Item>
            ))}
        </Steps>
    )
}

Disabled steps

Pass disabled to a Steps.Item to prevent the user from navigating to it.

<Steps>
    <Steps.Item disabled>Forwarding</Steps.Item>
    <Steps.Item isSelected>Scanning</Steps.Item>
    <Steps.Item disabled>Export</Steps.Item>
</Steps>

Wrapping

By default, the items stretch to fill one row. Pass wrap to let them wrap onto multiple rows instead.

<Steps wrap>
    <Steps.Item isSelected>Forwarding</Steps.Item>
    <Steps.Item>Scanning</Steps.Item>
    <Steps.Item>Payment</Steps.Item>
    <Steps.Item>Export</Steps.Item>
    <Steps.Item>Review</Steps.Item>
    <Steps.Item>Confirmation</Steps.Item>
</Steps>

API reference

An interactive representation of a user's progress through a series of discrete steps.

Prop	Type	Default
`children` (required)	`enum`
`wrap`	`boolean`	`false`

Steps.Item

Prop	Type	Default
`children` (required)	`enum`
`disabled`	`boolean`
`isSelected`	`boolean`
`onClick`	`enum`

Didn't find what you were looking for?

Let us know in #team-design-systems or make a request.

Edit this page