Tailwind CSS cookbook · Intermediate
Show progress through a multi-step form
Indicate which step of a checkout or onboarding flow the user is on, with completed and upcoming steps.
Approach
Use an ordered list with flex, connect steps with a line (flex-1 h-0.5), and style completed, current and
upcoming steps differently. Mark the current step with aria-current="step".
Solution
<ol class="m-6 flex items-center text-sm font-medium">
<li class="flex items-center gap-2 text-indigo-600"><span class="grid size-7 place-items-center rounded-full bg-indigo-600 text-white">✓</span>Cart</li>
<li class="mx-3 h-0.5 flex-1 bg-indigo-600" aria-hidden="true"></li>
<li aria-current="step" class="flex items-center gap-2 text-indigo-600"><span class="grid size-7 place-items-center rounded-full ring-2 ring-indigo-600">2</span>Shipping</li>
<li class="mx-3 h-0.5 flex-1 bg-slate-200" aria-hidden="true"></li>
<li class="flex items-center gap-2 text-slate-400"><span class="grid size-7 place-items-center rounded-full ring-2 ring-slate-200">3</span>Payment</li>
</ol>
Pitfalls
- Communicating state only with colour; add check marks and
aria-current. - Long labels squashing the bar on phones; hide labels below
sm:withhidden sm:inlineand keep the numbers.
Variations
- A vertical version with
flex-coland a left border line suits mobile onboarding.
Further reading: Tailwind CSS docs
Reference: https://tailwindcss.com/docs/flex