Steps

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

Install

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) => 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

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