Components

Wizard

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

Basic usage

Wizard renders the step selected by its step prop. Each Wizard.Step has a step name, and the indicator above the content shows one dot per step. Pass a number to select a step by its position instead.

import {useState} from 'react'
import {Button, Stack, Wizard} from '@pleo-io/telescope'


const ImportWizard = () => {
    const [step, setStep] = useState('forwarding')


    return (
        <Wizard step={step}>
            <Wizard.Step step="forwarding" label="Forwarding">
                <Stack align="center">
                    <Button variant="primary" onClick={() => setStep('scanning')}>
                        Continue
                    </Button>
                </Stack>
            </Wizard.Step>
            <Wizard.Step step="scanning" label="Scanning">
                <Stack align="center">
                    <Button variant="primary" onClick={() => setStep('forwarding')}>
                        Back
                    </Button>
                </Stack>
            </Wizard.Step>
        </Wizard>
    )
}

Step states

The steps before the current one are shown as done. Use isCurrentStepDone, isCurrentStepPending or isCurrentStepError to show the state of the current step.

<Wizard step={1} isCurrentStepPending>
    <Wizard.Step label="Connect">…</Wizard.Step>
    <Wizard.Step label="Import">…</Wizard.Step>
</Wizard>

Hiding the indicator

Pass hideIndicator to render only the step content, for example when the steps have their own heading.

<Wizard step={step} hideIndicator>
    <Wizard.Step step="details">…</Wizard.Step>
    <Wizard.Step step="review">…</Wizard.Step>
</Wizard>

Step indicator only

Wizard.StepIndicator renders the indicator on its own, for example above a page that switches steps without Wizard. Pass one entry per step with an optional label, and the index of the current step.

<Wizard.StepIndicator
    steps={[{label: 'Connect accounting system'}, {label: 'Set up categories'}, {}]}
    currentIndex={1}
/>

API reference

Prop	Type	Default
`children`	`enum`
`className`	`enum`
`hideIndicator`	`boolean`
`isCurrentStepDone`	`boolean`
`isCurrentStepError`	`boolean`
`isCurrentStepPending`	`boolean`
`labelMaxWidth`	`enum`
`noAnimation`	`boolean`
`noRelative`	`boolean`
`step` (required)	`enum`
`stepSize`	`enum`

Wizard.Step

Prop	Type	Default
`children` (required)	`ReactElement<unknown, string \| JSXElementConstructor<any>>`
`label`	`enum`
`step`	`enum`

Wizard.StepIndicator

Prop	Type	Default
`currentIndex` (required)	`number`
`isCurrentStepDone`	`boolean`	`false`
`isCurrentStepError`	`boolean`	`false`
`isCurrentStepPending`	`boolean`	`false`
`labelMaxWidth`	`enum`
`steps` (required)	`{ label?: ReactNode; }[]`
`stepSize`	`enum`

Didn't find what you were looking for?

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

Edit this page