# Wizard

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

Tabs: [Guidelines](/components/web/wizard/wizard.guidelines.md) · [Code](/components/web/wizard/wizard.code.md)

## 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.

```tsx
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.

```tsx
<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.

```tsx
<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.

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

## API reference

#### `children`

Type: `ReactNode`

##### Allowed values

- `null`
- `string`
- `number`
- `bigint`
- `false`
- `true`
- `ReactElement<unknown, string | JSXElementConstructor<any>>`
- `Iterable<ReactNode>`
- `ReactPortal`
- `Promise<AwaitedReactNode>`

Default: -

Steps to render, usually `Wizard.Step` elements

#### `className`

Type: `string | undefined`

Default: -

No description available

#### `hideIndicator`

Type: `boolean`

Default: -

Hides the step indicator

#### `isCurrentStepDone`

Type: `boolean`

Default: -

Marks the current step as done

#### `isCurrentStepError`

Type: `boolean`

Default: -

Shows the current step as failed

#### `isCurrentStepPending`

Type: `boolean`

Default: -

Shows the current step as pending

#### `labelMaxWidth`

Type: `number | undefined`

Default: -

Width of each step label, in pixels

#### `noAnimation`

Type: `boolean`

Default: -

Disables the transition between steps

#### `noRelative`

Type: `boolean`

Default: -

Removes the relative positioning of the step container

#### `step` (required)

Type: `string | number`

Default: -

Index or name of the step to render

#### `stepSize`

Type: `number | undefined`

Default: -

Width of each step in the indicator, in pixels

### Wizard.Step

#### `children` (required)

Type: `ReactElement<unknown, string | JSXElementConstructor<any>>`

Default: -

Content rendered while this step is active

#### `label`

Type: `ReactNode`

##### Allowed values

- `null`
- `string`
- `number`
- `bigint`
- `false`
- `true`
- `ReactElement<unknown, string | JSXElementConstructor<any>>`
- `Iterable<ReactNode>`
- `ReactPortal`
- `Promise<AwaitedReactNode>`

Default: -

Label shown below the step indicator

#### `step`

Type: `string | number | undefined`

Default: -

Name used to select this step from the `step` prop of `Wizard`

### Wizard.StepIndicator

#### `currentIndex` (required)

Type: `number`

Default: -

Index of the current step

#### `isCurrentStepDone`

Type: `boolean`

Default: `false`

Marks the current step as done

#### `isCurrentStepError`

Type: `boolean`

Default: `false`

Shows the current step as failed

#### `isCurrentStepPending`

Type: `boolean`

Default: `false`

Shows the current step as pending

#### `labelMaxWidth`

Type: `number | undefined`

Default: -

Width of each step label, in pixels

#### `steps` (required)

Type: `{ label?: ReactNode; }[]`

Default: -

Steps to render, each with an optional label

#### `stepSize`

Type: `number | undefined`

Default: -

Width of each step in the indicator, in pixels