Steps

Steps can be used in multiple ways, but they are most commonly used to present a series of steps that a user must finish in order to complete a task or achieve a goal. They can be used to guide users through a process, to provide feedback on their progress, or to indicate the current step in a multi-step process.

Design Hints

Steps are a powerful tool for enhancing the user experience. It gives the user a clear indication of the user's progress, an approximate idea about the length of the process and give the user an idea of what data they will need to enter in future steps.

Accessiblity Hints

For accessibility, it's important to ensure that there are proper visible labels for each step. The current step should be indicated by using aria-current=step for those who may not be able to see the visual differences between the currently active and inactive steps.

Simple Steps

A simple horizontal stepper that can be used to present a series of steps and current step.

1

Payment Details
2

Address Details
3

Confirm Details

Payment Details Completed
2

Address Details
3

Confirm Details

<ol class="flex w-full flex-row justify-between sm:items-center">
  <li class="w-full space-y-2" aria-current="step">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
      >
        1</span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-gray-300 dark:bg-zinc-800"
      ></span>
    </div>
    <p
      class="text-start text-sm font-medium text-indigo-700 sm:text-nowrap sm:text-base dark:text-indigo-300"
    >
      Payment Details
    </p>
  </li>
  <li class="w-full space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-gray-300 text-center dark:bg-zinc-800"
      >
        2</span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-gray-300 dark:bg-zinc-800"
      ></span>
    </div>
    <p
      class="text-start text-sm font-medium text-gray-700 sm:text-nowrap sm:text-base dark:text-gray-400"
    >
      Address Details
    </p>
  </li>
  <li class="space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-gray-300 text-center dark:bg-zinc-800"
      >
        3</span
      >
    </div>
    <p
      class="text-start text-sm font-medium text-gray-700 sm:text-nowrap sm:text-base dark:text-gray-400"
    >
      Confirm Details
    </p>
  </li>
</ol>
<ol class="flex w-full flex-row justify-center sm:items-center">
  <li class="w-full space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-green-800 text-center text-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="1rem"
          height="1rem"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"></path>
        </svg></span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-green-800"></span>
    </div>
    <p
      class="text-start text-sm font-medium text-green-800 sm:text-nowrap sm:text-base dark:text-green-600"
    >
      Payment Details <span class="sr-only">Completed</span>
    </p>
  </li>
  <li class="w-full space-y-2" aria-current="step">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
      >
        2</span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-gray-300 dark:bg-zinc-800"
      ></span>
    </div>
    <p
      class="text-start text-sm font-medium text-indigo-700 sm:text-nowrap sm:text-base dark:text-indigo-300"
    >
      Address Details
    </p>
  </li>
  <li class="space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-gray-300 text-center dark:bg-zinc-800"
      >
        3</span
      >
    </div>
    <p
      class="text-start text-sm font-medium text-gray-700 sm:text-nowrap sm:text-base dark:text-gray-400"
    >
      Confirm Details
    </p>
  </li>
</ol>

<ol class="flex w-full flex-row justify-between sm:items-center">
  <li class="w-full space-y-2" aria-current="step">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
      >
        1</span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-gray-300 dark:bg-zinc-800"
      ></span>
    </div>
    <p
      class="text-start text-sm font-medium text-indigo-700 sm:text-nowrap sm:text-base dark:text-indigo-300"
    >
      Payment Details
    </p>
  </li>
  <li class="w-full space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-gray-300 text-center dark:bg-zinc-800"
      >
        2</span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-gray-300 dark:bg-zinc-800"
      ></span>
    </div>
    <p
      class="text-start text-sm font-medium text-gray-700 sm:text-nowrap sm:text-base dark:text-gray-400"
    >
      Address Details
    </p>
  </li>
  <li class="space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-gray-300 text-center dark:bg-zinc-800"
      >
        3</span
      >
    </div>
    <p
      class="text-start text-sm font-medium text-gray-700 sm:text-nowrap sm:text-base dark:text-gray-400"
    >
      Confirm Details
    </p>
  </li>
</ol>
<ol class="flex w-full flex-row justify-center sm:items-center">
  <li class="w-full space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-green-800 text-center text-white"
      >
        <svg
          xmlns="http://www.w3.org/2000/svg"
          width="1rem"
          height="1rem"
          viewBox="0 0 24 24"
          aria-hidden="true"
        >
          <path
            fill="currentColor"
            d="M21 7L9 19l-5.5-5.5l1.41-1.41L9 16.17L19.59 5.59z"></path>
        </svg></span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-green-800"></span>
    </div>
    <p
      class="text-start text-sm font-medium text-green-800 sm:text-nowrap sm:text-base dark:text-green-600"
    >
      Payment Details <span class="sr-only">Completed</span>
    </p>
  </li>
  <li class="w-full space-y-2" aria-current="step">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
      >
        2</span
      >
      <span class="mx-1 h-[2px] w-full flex-1 bg-gray-300 dark:bg-zinc-800"
      ></span>
    </div>
    <p
      class="text-start text-sm font-medium text-indigo-700 sm:text-nowrap sm:text-base dark:text-indigo-300"
    >
      Address Details
    </p>
  </li>
  <li class="space-y-2">
    <div class="flex flex-row items-center">
      <span
        class="inline-flex size-10 items-center justify-center rounded-full bg-gray-300 text-center dark:bg-zinc-800"
      >
        3</span
      >
    </div>
    <p
      class="text-start text-sm font-medium text-gray-700 sm:text-nowrap sm:text-base dark:text-gray-400"
    >
      Confirm Details
    </p>
  </li>
</ol>

Note: You can enhance the stepper by adding navigation buttons to the stepper to allow the user to move between steps.

Alternate Steps

An alternate style of static stepper with a bit more details.

Payment Details
Address Details
Confirm Details

Payment DetailsCompleted
Address Details
Confirm Details

<div class="flex w-full flex-col space-y-8 text-black dark:text-white">
  <ol
    class="flex w-full flex-row items-start justify-center space-x-2 text-black dark:text-white"
  >
    <li
      aria-current="step"
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
    >
      <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-800"> </span>
      <span class="text-lg font-semibold">Payment Details</span>
    </li>

    <li
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-gray-700 dark:text-gray-400"
    >
      <span class="h-1 w-full bg-gray-500 dark:bg-gray-700"> </span>
      <span class="text-base">Address Details</span>
    </li>

    <li
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-gray-700 dark:text-gray-400"
    >
      <span class="h-1 w-full bg-gray-500 dark:bg-gray-700"> </span>
      <span class="text-base">Confirm Details</span>
    </li>
  </ol>
  <ol
    class="flex w-full flex-row items-start justify-center space-x-2 text-black dark:text-white"
  >
    <li
      class="flex h-full w-full flex-col items-start justify-center space-y-1 rounded-lg text-green-700 dark:text-green-400"
    >
      <span class="h-1 w-full bg-green-500 dark:bg-green-800"> </span>
      <p class="inline-flex text-base font-semibold">
        Payment Details<span class="sr-only">Completed</span>
      </p>
    </li>

    <li
      aria-current="step"
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
    >
      <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-800"> </span>
      <span class="text-lg font-semibold">Address Details</span>
    </li>

    <li
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-gray-700 dark:text-gray-400"
    >
      <span class="h-1 w-full bg-gray-500 dark:bg-gray-700"> </span>
      <span class="text-base">Confirm Details</span>
    </li>
  </ol>
</div>

<div class="flex w-full flex-col space-y-8 text-black dark:text-white">
  <ol
    class="flex w-full flex-row items-start justify-center space-x-2 text-black dark:text-white"
  >
    <li
      aria-current="step"
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
    >
      <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-800"> </span>
      <span class="text-lg font-semibold">Payment Details</span>
    </li>

    <li
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-gray-700 dark:text-gray-400"
    >
      <span class="h-1 w-full bg-gray-500 dark:bg-gray-700"> </span>
      <span class="text-base">Address Details</span>
    </li>

    <li
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-gray-700 dark:text-gray-400"
    >
      <span class="h-1 w-full bg-gray-500 dark:bg-gray-700"> </span>
      <span class="text-base">Confirm Details</span>
    </li>
  </ol>
  <ol
    class="flex w-full flex-row items-start justify-center space-x-2 text-black dark:text-white"
  >
    <li
      class="flex h-full w-full flex-col items-start justify-center space-y-1 rounded-lg text-green-700 dark:text-green-400"
    >
      <span class="h-1 w-full bg-green-500 dark:bg-green-800"> </span>
      <p class="inline-flex text-base font-semibold">
        Payment Details<span class="sr-only">Completed</span>
      </p>
    </li>

    <li
      aria-current="step"
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
    >
      <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-800"> </span>
      <span class="text-lg font-semibold">Address Details</span>
    </li>

    <li
      class="flex h-full w-full flex-col items-start space-y-1 rounded-lg text-gray-700 dark:text-gray-400"
    >
      <span class="h-1 w-full bg-gray-500 dark:bg-gray-700"> </span>
      <span class="text-base">Confirm Details</span>
    </li>
  </ol>
</div>

Dynamic Steps

When there are a lot of steps or when the available space is limited, the non-active steps are represented with placeholder bars while the active step is expanded with additional information.

Payment Details

Step 1 of 6 Enter Payment Details

Address Details

Step 3 of 6 Enter Address Details

<div class="flex w-full flex-col text-black dark:text-white">
  <ol
    class="mb-4 mt-2 flex w-full flex-row items-start justify-center space-x-1 text-black dark:text-white"
  >
    <li
      aria-current="step"
      class="flex-0 flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
    >
      <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-900"> </span>
      <span class="text-lg font-semibold">Payment Details</span>
    </li>

    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
  </ol>
  <h3 class="text-xl">
    <span class="sr-only">Step</span>
    <span
      class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
    >
      1</span
    > of 6 <span class="ml-2 text-xl font-semibold sm:text-2xl"
      >Enter Payment Details</span
    >
  </h3>

  <ol
    class="mb-4 mt-16 flex w-full flex-row items-start justify-center space-x-1 text-black dark:text-white"
  >
    <li class="h-2 w-[calc(1/4*100%)] bg-green-500 dark:bg-green-800"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-green-500 dark:bg-green-800"></li>
    <li
      aria-current="step"
      class="flex-0 flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
    >
      <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-900"> </span>
      <span class="text-lg font-semibold">Address Details</span>
    </li>

    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
    <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700"></li>
  </ol>
  <h3 class="text-xl">
    <span class="sr-only">Step</span>
    <span
      class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
    >
      3</span
    > of 6 <span class="ml-2 text-xl font-semibold sm:text-2xl"
      >Enter Address Details</span
    >
  </h3>
</div>

---
interface Props {
  stepTitle: string;
  stepNumber: number;
  stepTotal: number;
  stepDescription: string;
}
/** An example implementation of the dynamic steps component.
---
import DynamicSteps from './DynamicSteps.astro';

const stepTitle = 'Address Details';
const stepNumber = 1;
const stepTotal = 6;
const stepDescription = 'Enter Your Address Details';
---
<DynamicSteps stepTitle={stepTitle} stepNumber={stepNumber} stepTotal={stepTotal} stepDescription={stepDescription} />


  **/

const { stepTitle, stepNumber, stepTotal, stepDescription } =
  Astro.props as Props;
---

<ol
  class="mb-4 mt-2 flex w-full flex-row items-start justify-center space-x-1 text-black dark:text-white"
>
  {
    Array.from({ length: stepTotal }, (_, index) => {
      const currentStep = index + 1;
      return (
        <>
          {currentStep === stepNumber && (
            <li
              aria-current="step"
              class="flex-0 flex h-full w-full flex-col items-start space-y-1 rounded-lg text-indigo-700 dark:text-indigo-400"
            >
              <span class="h-2 w-full bg-indigo-500 dark:bg-indigo-900"> </span>
              <span class="text-lg font-semibold">{stepTitle}</span>
            </li>
          )}
          {currentStep < stepNumber && (
            <li class="h-2 w-[calc(1/4*100%)] bg-green-500 dark:bg-green-800" />
          )}
          {currentStep > stepNumber && (
            <li class="h-2 w-[calc(1/4*100%)] bg-gray-500 dark:bg-gray-700" />
          )}
        </>
      );
    })
  }
</ol>
<h3 class="text-xl">
  <span class="sr-only">Step</span>
  <span
    class="inline-flex size-10 items-center justify-center rounded-full bg-indigo-500 text-center text-white dark:bg-indigo-900"
  >
    {stepNumber}</span
  > of {stepTotal}
  <span class="ml-2 text-xl font-semibold sm:text-2xl">{stepDescription}</span>
</h3>

Note: The astrojs component dynamically generates the correct visuals based on the props passed to it.

Accessibility Testing Status

Component	NVDA	Windows Narrator	WAVE	Axe	IBM Equal Access
Simple Steps	Yes	Yes	Yes	Yes	Yes
AlternateSteps	Yes	Yes	Yes	Yes	Yes
Dynamic Steps	Yes	Yes	Yes	Yes	Yes

Steps are effective when the order of the steps is clear and the user can easily understand the purpose of each step.