Skip to documentation

Steps

A numbered sequence for multi-step flows, or a neutral vertical guide list when no step is current.

import { Steps } from '@lobehub/ui/base-ui';
NPMSourceEdit
Navigation

Basic

Loading preview

APIs

Steps properties
classNames
{ description?: string; indicator?: string; item?: string; title?: string; }
current
number
itemsRequired
StepItem[]
orientation
'horizontal' | 'vertical'

Defaults to "horizontal".

ref
null | (instance: HTMLOListElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLOListElement | null>

Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).

styles
{ description?: CSSProperties; indicator?: CSSProperties; item?: CSSProperties; title?: CSSProperties; }
variant
'default' | 'dot'

Defaults to "default".

Also accepts all native HTML and ARIA attributes.

With current, steps before it are finish, it is process, later ones are wait; an item's own status wins. Without current, every step renders as a neutral guide step. The current step gets aria-current="step".

Migrating from antd Steps

  • direction → orientation; progressDot → variant="dot"; size is removed.
  • Replace current={null as any} / current={-1} with no current.
  • Clickable steps (onChange), percent, labelPlacement and type="navigation" | "inline" are not supported.