# Steps

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

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

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

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

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

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

#### `children` (required)

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 `Steps.Item` elements

#### `wrap`

Type: `boolean`

Default: `false`

Allow the items to wrap onto multiple rows instead of stretching to fill one row

### Steps.Item

#### `children` (required)

Type: `ReactNode`

##### Allowed values

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

Default: -

Label of the step

#### `disabled`

Type: `boolean`

Default: -

Disables the step so it cannot be clicked

#### `isSelected`

Type: `boolean`

Default: -

Marks this as the current step.

#### `onClick`

Type: `(() => void) | undefined`

##### Allowed values

- `() => void`

Default: -

Called when the step is clicked