Navigation · Steps
Steps
Decompose complex tasks or tasks with prior relationships, use step components to guide users to operate according to the prescribed process, and let them know their current progress

Demos

How to import

Default step bar(Deprecated)

It is recommended to use the simple version of steps, which will be gradually deprecated later

Basic Steps(Recommended)

Set type="basic" to display a simple style step bar
You can use type="nav" to set the navigation style step bar. The navigation style step bar has the following characteristics:
  1. The step bar does not support interaction.
  2. It is suitable when the steps are not related to each other, the content does not affect each other, and the visual elements of the page need to be highlighted.
  3. The width of the step bar is opened according to the content.
  4. Steps.Step only supports title, className, and style attributes.

Mini size step bar

Display the mini size step bar by setting size="small"

Processing progress

Use with content and buttons to represent the processing progress of a process

Steps bar in vertical direction

Show steps in vertical direction by setting direction

Specify step status

Using Steps status Property to specify the state of the current step.

Custom icons

By setting Steps.Step's icon Properties, you can use custom icons.

onChange CallBack

Since version 1.29.0, onChange is supported, which can be used to realize the processing progress. onChange receives a parameter of type number, which is equal to initial + current.

API reference

Steps

ParametersInstructionstypeDefaultVersion
classNameClass namestring
currentSpecifies the current step, counting from 0. In the subStep element, the state can be overridden by the status attributenumber0
directionSpecify step bar directions. Currently support level (vertical) and vertical (vertical) in both directionsstringwith
hasLineWhen the step bar type is basic, you can control whether to display the connecting linebooleantrue1.18.0
initialStart serial number, count from 0.number0
sizeFor simple step bar and navigation step bar, the size is optional, the value is small, defaultstringdefault1.18.0
statusSpecify the status of the current step, optional wait,process,finish,error,warningstringprocess
styleStyleCSSProperties
typeSteps type, optional fill basic、navstringfill1.18.0
onChangeonChange callback(index: number)=>void-1.29.0

Steps.Step

Step in the step bar.
ParametersInstructionstypeDefaultVersion
aria-labelContainer aria-labelReact.AriaAttributes["aria-label"]
descriptionDetailed description of steps, optionalReactNode-
iconType of step icon, optionalReactNode-
roleContainer roleReact.AriaRole-
statusSpecify the state. When this property is not configured, the currentof Steps is used to automatically specify the state. Optional: wait,process,finish,error,warningstringwait
styleCSS StyleCSSProperties
titleTitleReactNode-
onClickCallback of clickfunction-
onKeyDownCallback ok keyDownfunction-

Accessibility

ARIA

  • Steps and Step components support passing in the aria-label attribute to represent the description of Steps and Steps
  • Step component has an aria-current step attribute, indicating that this is a step in the step bar

Content Guidelines

  • Step title
    • title should be kept concise, avoiding truncation and line breaks
    • use sentence capitalization
    • do not include punctuation
  • Step description
    • supplementary contextual information for the title
    • don't end with punctuation

Design Tokens