Steps

steps

Communicates progress and status across an ordered multi-step process.

Usage

Basic usage

items provides a title/description and current specifies the current step - previous steps are automatically marked as complete.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

const items = [
  { title: "Submit application", description: "Fill in reimbursement document" },
  { title: "Department Approval", description: "Supervisor Review Amount" },
  { title: "Financial transfer", description: "Business transfer" },
  { title: "Complete", description: "Archive and close" },
];

<Steps items={items} current={1} />

Error status

status="error" Mark the current step in red, indicating that the step failed to verify or was rejected.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

<Steps items={items} current={2} status="error" />

Vertical orientation

direction="vertical" Arrange vertically, suitable for side rails or narrow containers.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

<Steps direction="vertical" items={items} current={2} />

Small size

size="sm" Tighten the indicator and text, suitable for dense middle and backend layout.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

<Steps size="sm" items={items} current={1} />

Clickable + Controlled

After inputting onChange, each step can be clicked, and cooperate with useState to realize the previous/next step navigation.

tsx

function Wizard() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex flex-col gap-5">
      <Steps items={items} current={current} onChange={setCurrent} />
      <div className="flex gap-2">
        <Button variant="outline" size="sm" disabled={current === 0}
          onClick={() => setCurrent((c) => c - 1)}> Previous </Button>
        <Button size="sm" disabled={current === items.length - 1}
          onClick={() => setCurrent((c) => c + 1)}>Next </Button>
      </div>
    </div>
  );
}

When to use

Use Steps to show progress through a multistep form, order lifecycle, or approval flow. It supports horizontal and vertical layouts, derived or explicit states, clickable controlled navigation, descriptions, and custom icons. Stepper is a lightweight progress display; choose Steps for richer workflows.

Import

import { Steps } from "@hulianui/ui"

Props

Name	Type	Default	Description
items*	`StepsItem[]`	—	Step data described below.
current	`number`	`0`	Zero-based current step used to derive each item's state.
status	`"process" \| "finish" \| "error"`	`"process"`	State assigned to the item whose index equals `current`.
direction	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction.
size	`"sm" \| "md"`	`"md"`	Component size.
className	`string`	—	Additional class name.

The list uses the built-in Chinese aria-label "\u6b65\u9aa4", meaning “Steps.”

StepsItem

Field	Type	Description
title*	`ReactNode`	Step title.
description	`ReactNode`	Secondary copy below the title.
icon	`ReactNode`	Custom indicator replacing the default number or status icon.
status	`"wait" \| "process" \| "finish" \| "error"`	Explicit item state overriding the state derived from `current`.
disabled	`boolean`	Prevents selection and reduces opacity.

Events

Event	Type	Description
onChange	`(index: number) => void`	When provided, makes steps clickable and reports the index of a selected non-disabled item.

Example

tsx

const ORDER = [
  { title: "Submit", description: "Complete the expense form" },
  { title: "Department approval", description: "Manager reviews the amount" },
  { title: "Payment", description: "Finance sends the transfer" },
  { title: "Complete", description: "Archive the case" },
];

// Static progress
<Steps items={ORDER} current={1} />

// Clickable and controlled
const [current, setCurrent] = useState(1);
<Steps items={ORDER} current={current} onChange={setCurrent} />

Usage guidelines

By default, indices below current derive finish, the current index derives status (process by default), and later indices derive wait. Set StepsItem.status to override one item.
Items become clickable only when onChange is provided. Selecting a disabled item does not call the callback.

Tabs · Breadcrumb · Pagination · Anchor · Affix · BackTop

Playground

currentdirectionstatussize

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

<Steps
  current={1}
  items={[
    { title: "Submit application", description: "Fill in reimbursement document" },
    { title: "Department Approval", description: "Supervisor Review Amount" },
    { title: "Financial transfer", description: "Business transfer" },
    { title: "Complete", description: "Archive and close" },
  ]}
/>

Usage

Basic usage

items provides a title/description and current specifies the current step - previous steps are automatically marked as complete.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

const items = [
  { title: "Submit application", description: "Fill in reimbursement document" },
  { title: "Department Approval", description: "Supervisor Review Amount" },
  { title: "Financial transfer", description: "Business transfer" },
  { title: "Complete", description: "Archive and close" },
];

<Steps items={items} current={1} />

Error status

status="error" Mark the current step in red, indicating that the step failed to verify or was rejected.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

<Steps items={items} current={2} status="error" />

Vertical orientation

direction="vertical" Arrange vertically, suitable for side rails or narrow containers.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

<Steps direction="vertical" items={items} current={2} />

Small size

size="sm" Tighten the indicator and text, suitable for dense middle and backend layout.

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

tsx

<Steps size="sm" items={items} current={1} />

Clickable + Controlled

After inputting onChange, each step can be clicked, and cooperate with useState to realize the previous/next step navigation.

tsx

function Wizard() {
  const [current, setCurrent] = useState(1);
  return (
    <div className="flex flex-col gap-5">
      <Steps items={items} current={current} onChange={setCurrent} />
      <div className="flex gap-2">
        <Button variant="outline" size="sm" disabled={current === 0}
          onClick={() => setCurrent((c) => c - 1)}> Previous </Button>
        <Button size="sm" disabled={current === items.length - 1}
          onClick={() => setCurrent((c) => c + 1)}>Next </Button>
      </div>
    </div>
  );
}

When to use

Props

Name	Type	Default	Description
items*	`StepsItem[]`	—	Step data described below.
current	`number`	`0`	Zero-based current step used to derive each item's state.
status	`"process" \| "finish" \| "error"`	`"process"`	State assigned to the item whose index equals `current`.
direction	`"horizontal" \| "vertical"`	`"horizontal"`	Layout direction.
size	`"sm" \| "md"`	`"md"`	Component size.
className	`string`	—	Additional class name.

The list uses the built-in Chinese aria-label "\u6b65\u9aa4", meaning “Steps.”

StepsItem

Field	Type	Description
title*	`ReactNode`	Step title.
description	`ReactNode`	Secondary copy below the title.
icon	`ReactNode`	Custom indicator replacing the default number or status icon.
status	`"wait" \| "process" \| "finish" \| "error"`	Explicit item state overriding the state derived from `current`.
disabled	`boolean`	Prevents selection and reduces opacity.

Event

Type

Description

onChange

(index: number) => void

When provided, makes steps clickable and reports the index of a selected non-disabled item.

const ORDER = [ { title: "Submit", description: "Complete the expense form" }, { title: "Department approval", description: "Manager reviews the amount" }, { title: "Payment", description: "Finance sends the transfer" }, { title: "Complete", description: "Archive the case" }, ]; // Static progress <Steps items={ORDER} current={1} /> // Clickable and controlled const [current, setCurrent] = useState(1); <Steps items={ORDER} current={current} onChange={setCurrent} />

Playground

currentdirectionstatussize

Submit applicationFill in the reimbursement document
Department ApprovalAmount reviewed by supervisor
Financial paymentCorporate transfer
CompleteArchived and closed

<Steps
  current={1}
  items={[
    { title: "Submit application", description: "Fill in reimbursement document" },
    { title: "Department Approval", description: "Supervisor Review Amount" },
    { title: "Financial transfer", description: "Business transfer" },
    { title: "Complete", description: "Archive and close" },
  ]}
/>

Steps

Usage

Basic usage

Error status

Vertical orientation

Small size

Clickable + Controlled

When to use

Import

Props

Events

Example

Usage guidelines

Related

Playground

Steps

Usage

Basic usage

Error status

Vertical orientation

Small size

Clickable + Controlled

When to use

Import

Props

Events

Example

Usage guidelines

Related

Playground