# Steps

- Page: https://jiguang132.com/resources/arco-design/docs/steps
- Resource: Arco Design (https://jiguang132.com/resources/arco-design.md)
- All guides: https://jiguang132.com/resources/arco-design/docs.md

Show the task flow and the current degree of completion, and guide users to follow the steps to complete the task.

## Install

```bash
npm install @arco-design/web-react@2.66.18
```

Import `@arco-design/web-react/dist/css/arco.css` at the entry and set the locale with `ConfigProvider`. React 19 projects must also import `@arco-design/web-react/es/_util/react-19-adapter` first, or imperative APIs such as Message and Modal cannot render.

## Examples

- **Basic**: Basic usage of the step bar component.
- **Small Step Bar**: Small step bar can be displayed through `size`
- **Show Description**: Use `description` to add description information.
- **Customize Icon**: Specify `icon` to customize the icon of the node.
- **Label Position**: Where to place the label, the default `horizontal` is placed on the right side of the icon, and the optional `vertical` is placed below the icon.
- **Steps Status**: The error status is specified by the parameter `status`.
- **Hidden Connection Lines**: Set `lineless` to hide the connection line.
- **Vertical Step Bar**: Vertical step bar.
- **Arrow Step Bar**: By specifying `type:'arrow'`, you can use arrow type step bar. **Note**: Only horizontal step bar are supported.
- **Mini Arrow Step Bar**: By specifying `type:'arrow', size:'small'`, you can use mini-arrow type step bar. However, only horizontal step bar are supported. And `description` will be ignored.
- **Switch Steps**: You can jump to different steps by modifying the `current` parameter.
- **Dotted Step Bar**: By specifying `type: 'dot'`, you can use dotted step bar. **Note**: The label of the horizontal step bar can only be located below it, and the label of the vertical step bar can only be located to the right of it
- **Customize Node**: You can customize the node by setting `customDot`, and you can add pop-up or any custom operation to the node.
- **Click to Switch Steps**: After setting `onChange`, the step bar supports clicking to switch steps.
- **Navigation Step Bar**: Step bar of navigation type.

Examples come from the official Arco Design repository (MIT) at the commit published as npm 2.66.18. Some use online images or upload endpoints; network requests are disabled in previews.

## API

### Steps

|Property|Description|Type|DefaultValue|
|---|---|---|---|
|lineless|Hidden lines|boolean |`-`|
|current|Current step|number |`1`|
|direction|Direction of the step bar|'vertical' \| 'horizontal' |`horizontal`|
|labelPlacement|Where to place description,the default `horizontal` is placed on the right side of the icon, optional `vertical` is placed below the icon|'horizontal' \| 'vertical' |`horizontal`|
|size|To specify the size of the step bar|'default' \| 'small' |`default`|
|status|Status of current step|'wait' \| 'process' \| 'finish' \| 'error' |`-`|
|type|Type of step|'default' \| 'arrow' \| 'dot' \| 'navigation' |`default`|
|className|Additional css class|string \| string[] |`-`|
|style|Additional style|CSSProperties |`-`|
|customDot|Customize the step,arrow type is not supported|(IconDot: ReactNode, stepConfig: [CustomDotRecord](#customdotrecord)) => ReactNode |`-`|
|onChange|Callback when click step, after setting this prop, the step bar will switch when clicked.|(current: number, id: any) => void |`-`|

### Steps.Step

|Property|Description|Type|DefaultValue|Version|
|---|---|---|---|---|
|disabled|Disable click event|boolean |`-`|-|
|status|Status of step|'wait' \| 'process' \| 'finish' \| 'error' |`-`|-|
|description|Description of step|string \| ReactNode |`-`|-|
|title|Title of step|string \| ReactNode |`-`|-|
|className|The additional css className|string \| string[] |`-`|2.11.0|
|id|Specify the ID of the node, which will be used as a parameter in callback onChange|any |`-`|-|
|style|The additional css style|CSSProperties |`-`|2.11.0|
|onClick|Callback when item is clicked|(index: number, id: any, e) => void |`-`|`e` in `2.40.0`|

### CustomDotRecord

```js
export type CustomDotRecord = {
  index: number;
  status: string;
  title: ReactNode;
  description: ReactNode;
};
```

---

Index of all JGuang resources: https://jiguang132.com/llms.txt