> Leaf UI 0.6.0 · Package: @ifhover/leaf-ui · Source: b30c3d3a8fa9c5e15d0d0522cebfbd33f60c6b06
> Browser documentation: https://ifhover.github.io/leaf-ui/v/0.6.0/en/components/steps.html

> For AI agents: the complete documentation index is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms.txt, the full documentation bundle is available at https://ifhover.github.io/leaf-ui/v/0.6.0/en/llms-full.txt.

# Steps

Show the progress and current step of a task.

## Basic usage


Interactive steps

1. Create projectEnter basic information
1. 2Review settingsReview project information
1. 3DoneGet started

PreviousNext

Error feedback

1. Create projectEnter basic information
1. Review settingsReview project information
1. 3DoneGet started

basic.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/en/steps/basic.tsx"
import type { StepItem } from '@ifhover/leaf-ui';

import { Button, Flex, Space, Steps, Text } from '@ifhover/leaf-ui';

import { useState } from 'react';

const items: readonly StepItem[] = [
  { title: 'Create project', description: 'Enter basic information' },
  { title: 'Review settings', description: 'Review project information' },
  { title: 'Done', description: 'Get started' },
];

export function StepsBasic() {
  const [current, setCurrent] = useState(1);
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm">
        <Text>Interactive steps</Text>
        <Steps items={items} current={current} onChange={setCurrent} />
      </Flex>
      <Flex gap="md" align="center" wrap justify="center">
        <Button variant="outline" disabled={current === 0} onClick={() => setCurrent(current - 1)}>
          Previous
        </Button>
        <Button disabled={current === 2} onClick={() => setCurrent(current + 1)}>
          Next
        </Button>
      </Flex>
      <Flex direction="column" gap="sm">
        <Text>Error feedback</Text>
        <Steps items={items} current={1} direction="vertical" status="error" size="sm" />
      </Flex>
    </Space>
  );
}
```

Expand code

## Dots and step progress


Dot steps

1. Create
1. Review
1. Publish

Progress within the current step

1. Create
1. 2Review
1. 3Publish

capabilities.tsx

Copy code

```tsx lineNumbers file="../../../src/examples/steps/capabilities.tsx"
import { Flex, Space, Steps, Text } from '@ifhover/leaf-ui';

const items = [{ title: 'Create' }, { title: 'Review' }, { title: 'Publish' }];

export function Capabilities() {
  return (
    <Space direction="vertical" align="stretch">
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Dot steps'}</Text>
        <Steps progressDot current={1} items={items} />
      </Flex>
      <Flex direction="column" gap="sm" align="center">
        <Text>{'Progress within the current step'}</Text>
        <Steps current={1} percent={65} items={items} />
      </Flex>
    </Space>
  );
}
```

Expand code

## Steps API

| Property      | Type                                                                                  | Default        | Description                                        |
| ------------- | ------------------------------------------------------------------------------------- | -------------- | -------------------------------------------------- |
| `items`       | `readonly `[`StepItem`](#stepitem)`[]`                                                | Required       | Required. Step items                               |
| `current`     | `number`                                                                              | `0`            | Current step index, starting at 0                  |
| `status`      | `'process' \| 'finish' \| 'error'`                                                    | `'process'`    | Current step status                                |
| `direction`   | `'horizontal' \| 'vertical'`                                                          | `'horizontal'` | Layout direction                                   |
| `size`        | `'sm' \| 'md' \| 'lg'`                                                                | `'md'`         | Step size                                          |
| `loading`     | `boolean`                                                                             | `false`        | Show a spinner for the current step                |
| `onChange`    | `(current: number) => void`                                                           | —              | Makes steps selectable                             |
| `progressDot` | `boolean \| ((dot: ReactNode, info: { index: number; status: string }) => ReactNode)` | —              | Use progress dots, optionally with custom content. |
| `percent`     | `number`                                                                              | —              | Completion percentage.                             |

## StepItem

| Property      | Type                                         | Default  | Description              |
| ------------- | -------------------------------------------- | -------- | ------------------------ |
| `key`         | `string`                                     | —        | Stable identifier        |
| `title`       | `ReactNode`                                  | Required | Required. Step title     |
| `description` | `ReactNode`                                  | —        | Supporting description   |
| `icon`        | `ReactNode`                                  | —        | Custom icon              |
| `status`      | `'wait' \| 'process' \| 'finish' \| 'error'` | —        | Override the item status |
| `disabled`    | `boolean`                                    | `false`  | Disable interaction.     |

## Types

Import the component props and item types when preparing your own values.

```ts
import type { StepsProps, StepItem } from '@ifhover/leaf-ui';
```

## Usage notes

Keep current in application state. onChange reports the selected index. Item statuses are derived from current unless explicitly supplied.