> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Steps

> Reference for the Steps component. Learn how to configure step items and control the current state to guide users through a task step by step.

A navigation bar that guides users through a task step by step.

## When to Use

* When a task is complex or involves a sequence of dependencies, break it down into a series of steps to simplify it.

## Component Example

## Component Properties

| Attribute        | Description                            | Type                                                                   | Default                                                                                                                                                                                                      |
| ---------------- | -------------------------------------- | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `animation`      | Whether to enable animation            | `boolean`                                                              | `true`                                                                                                                                                                                                       |
| `contentRender`  | Custom rendering for content           | `(item: StepsDataSource, index: number)=> ReactNode`                   | -                                                                                                                                                                                                            |
| `current`        | The current step                       | `number`                                                               | `1`                                                                                                                                                                                                          |
| `dataSource`     | Step data                              | [StepsDataSource\[\]](/open/yida/components/interface#stepsdatasource) | `[ { "title": "step1", "content": "Open the refrigerator door" }, { "title": "step2", "content": "Put the elephant in the refrigerator" }, { "title": "step3", "content": "Close the refrigerator door" } ]` |
| `direction`      | Display direction of the step bar      | `'horizontal' \| 'vertical'`                                           | `'horizontal'`                                                                                                                                                                                               |
| `labelPlacement` | Content layout                         | `'horizontal' \| 'vertical'`                                           | `'vertical'`                                                                                                                                                                                                 |
| `onClick`        | Event triggered when a step is clicked | `(index: number) => void`                                              | -                                                                                                                                                                                                            |
| `readOnly`       | Whether Read-only mode is enabled      | `boolean`                                                              | `false`                                                                                                                                                                                                      |
| `shape`          | Display type of the step bar           | `'circle' \| 'arrow' \| 'dot'`                                         | `'circle'`                                                                                                                                                                                                   |