Step

StatusCopy Anchor Link

status sets the segment, indicator and text colours. number is the 1-based position. Incomplete and current steps draw the number. A complete step draws a check instead.

title is the label and wraps inside the step. description renders under it only when given. Neither takes null, undefined or a boolean, which would leave an empty line.

<Step
  status="complete"
  number={1}
  title="Your details"
  description="Name and email"
  className="w-[180px]"
/>
<Step
  status="current"
  number={2}
  title="Address"
  description="Where to send it"
  className="w-[180px]"
/>
<Step
  status="incomplete"
  number={3}
  title="Payment"
  description="Choose a method"
  className="w-[180px]"
/>

SizesCopy Anchor Link

size takes sm, md or lg, for a 20, 24 or 28px indicator. sm is the default.

<div className="flex items-start gap-spacing-16">
  <Step
    size="sm"
    status="current"
    number={1}
    title="Small"
    description="20px indicator"
    className="w-[180px]"
  />
  <Step
    size="md"
    status="current"
    number={1}
    title="Medium"
    description="24px indicator"
    className="w-[180px]"
  />
  <Step
    size="lg"
    status="current"
    number={1}
    title="Large"
    description="28px indicator"
    className="w-[180px]"
  />
</div>

OrientationCopy Anchor Link

orientation="vertical" puts the segment beside the body, stretched to the full step height. The default is horizontal, with the segment on top and a 160px minimum width. Step never switches orientation by itself.

A standalone step fills its container. Set a width with className.

<Step
  orientation="vertical"
  size="md"
  status="current"
  number={2}
  title="Verify identity"
  description="Upload a photo of your ID card"
  className="w-[360px]"
/>

Custom indicator and stylesCopy Anchor Link

indicator replaces the number or the check. titleClassName and descriptionClassName merge after the built-in look, so they win over it. Each takes one value for every status or a map keyed by status. A missing key takes the default for that status.

<Step
  status="current"
  number={1}
  indicator="A"
  title="Section A"
  description="Multiple choice"
  className="w-[180px]"
/>
<Step
  status="complete"
  number={2}
  title="Section B"
  description="Short answers"
  titleClassName={{ complete: 'text-color-text-secondary' }}
  className="w-[180px]"
/>

AccessibilityCopy Anchor Link

• The current step sets aria-current="step".
• Complete and incomplete steps add visually hidden words after the title, "Completed" and "Not started" by default. Localise them with statusLabels, for example statusLabels={{ complete: 'เสร็จแล้ว', incomplete: 'ยังไม่เริ่ม' }}.
• The indicator and the segment are decorative and aria-hidden.
• A step is static. It has no hover colour, no tab stop and no focus ring. Keep titles and descriptions noninteractive.

APICopy Anchor Link

StepCopy Anchor Link