Go to AntUIKit homepage

Steps

Where the reader is in a sequence, and what is left. Horizontal, vertical, inline or as navigation, with a status per step.

Preview in FigmaLLMs

Usage

Steps says where the reader is in a sequence and what is left of it.

When to use

Steps shows where the reader is in an ordered sequence: what is done, what is current and what is still ahead. Every step has a name, and the whole set is known before the process starts.
  • A flow split over several screens: checkout, a signup wizard, a migration run.
  • An onboarding checklist, where each step carries a sentence of its own.
  • Where one object sits in a shared pipeline, repeated down a list. Use type="inline" for that.
  • A long form broken into named parts, with the rail as the way back to a part already filled in.
Use something else when:
  • There is one measurable quantity and no named stages (a percentage, a byte count). Use Progress.
  • The panels have no order and the reader may open them in any sequence. Use Tabs.
  • The trail is a location in a hierarchy, not progress through time. Use Breadcrumb.
  • The sequence is a log of things that already happened, with timestamps and nothing ahead. Use Timeline.

Orientation and title placement

  • orientation takes horizontal or vertical. Go horizontal for three to five short steps across the top of a page, and vertical once a step carries a sentence or the rail sits in a side column.
  • responsive is on by default and turns a horizontal rail vertical below 576px, whatever orientation says. Pass responsive={false} to keep it horizontal, and handle the overflow yourself.
  • titlePlacement puts a title beside its circle (horizontal, the default) or under it (vertical). Under leaves room for longer titles on a horizontal rail, and costs height.
  • titlePlacement is ignored by the dot, inline and navigation types, and on a vertical rail.
  • maxCount (at least 3) keeps a long flow horizontal: the hidden steps collapse into one disabled ellipsis step, drawn with the more glyph from your icon pack. onChange still receives the original index.
direction and labelPlacement are the v5 names for these two. They still work and warn in development, so write the new names.

current, status and a failed step

  • current is zero-based and defaults to 0. Steps before it show as finished and steps after it as waiting, so the first circle already has a tick with no status set on any item.
  • status on Steps marks the current step only. Use it to say the process stalled where it is.
  • To fail a step that is not current, set status: "error" on that item. An item's own status wins over the one current gives it.
  • initial is the number the first item counts as. With initial={1}, current={1} points at the first item.
A failed step is a red circle and a cross. Say what failed in that step's content or in an Alert beside the rail, and say what the reader can do about it.

The items API

One object per step, in order. Steps.Step is deprecated and not exported, so pass items.
  • title is the step's name. Keep the set short and parallel, since the titles are read side by side.
  • subTitle is the small line beside the title (a duration, an owner, a count). content is the text under it, and description is its deprecated name. When you pass both, content wins.
  • icon replaces what is inside the circle whatever the status, so a step with its own icon shows neither the tick nor the number.
  • disabled takes the step out of the click path and out of the tab order. See the Accessibility tab.
  • Give each item a key when the list can be reordered or filtered.
  • classNames and styles exist per item as well as on Steps, so one step can look different without a descendant selector.

The five types

  • default is the connected rail of numbered circles, and the only type that draws percent.
  • navigation turns the rail into a bar of pointers for a flow the reader moves through.
  • inline is a compact row of dots that shows where one object sits in a shared process, repeated down a list. An item's content shows in a tooltip on hover, and description, icon and percent are ignored. offset works in this type only: it shifts a row that shows only the later steps so it lines up under a full one.
  • panel gives every step its own bordered panel instead of a connected rail. Use it for an onboarding checklist, where each step's content is a full sentence. It is always horizontal and ignores responsive.
  • dot reduces the rail to dots, for a flow you want visible but quiet. It draws no glyph.
variant takes filled (the default) or outlined. Pick one per surface and keep it.

Size and percent

  • size takes small or medium, and there is no large. Use small when the rail is a secondary readout in a card or a table header, and medium when the page is about it. default is the deprecated name for medium.
  • percent draws a ring around the current circle while its status is process. Use it for a step you can measure (an upload, an import), not on a step that is only open.
  • The navigation, dot, panel and inline types do not draw percent. If you need the ring, stay on the default type.

Clickable steps

Pass onChange to make the steps clickable. Without it they are a readout. It does not fire when the reader clicks the step that is already current.
  • Let the reader go back whenever a finished step can be reviewed or corrected without losing what came after it.
  • Do not let them jump forward past a step that gates the next one. Leave the later steps disabled so the rail never offers a move it will reject.
  • Where one step has its own destination, handle it with onClick on the item. It fires alongside onChange.
  • A read-only rail (a receipt, a status readout) takes no onChange, so it does not look like a row of buttons.
  • In a wizard with a Form, keep the form's initialValues constant. resetFields() restores the last initialValues the form was given, so passing state you write back to makes a reset restore the values you meant to clear.

progressDot

progressDot is deprecated: type="dot" replaces the boolean, and iconRender replaces the render function. Both still work.
  • progressDot={true} and type="dot" draw no glyph, so the icon pack glyphs do not apply.
  • A function progressDot only runs while iconRender is unset, so passing both means the function never runs.
  • An iconRender of your own replaces the kit's default one.
StatisticSwitch
© 2026 AntUIKit . All rights reserved.