New
SteppersHorizontal Numbered Stepper
A row of numbered markers joined by connectors, with completed steps shown as checks.
#stepper#horizontal#numbered
3 frameworksBeginner
Loading…
A titled "Step 2 of 5" fraction over a real progressbar fill.
<!--
A titled fraction over a real progressbar. role="progressbar" plus the
aria-value* trio makes the fill meaningful to assistive tech; the visible
"Step 2 of 5" is the same fact for everyone else. The fill width is the only
inline style because it is genuinely data, not decoration.
-->
<div class="w-full">
<div class="flex items-baseline justify-between gap-3">
<h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Shipping address</h3>
<p class="shrink-0 text-sm text-gray-500 dark:text-gray-400">Step 2 of 5</p>
</div>
<div role="progressbar" aria-valuenow="2" aria-valuemin="1" aria-valuemax="5" aria-label="Checkout progress" class="mt-2 h-2 w-full overflow-hidden rounded-full bg-gray-200 dark:bg-gray-700">
<div class="h-full rounded-full bg-blue-600 transition-all motion-reduce:transition-none" style="width: 40%"></div>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
stepsrequired | string[] | - | The ordered steps of the process. |
current | number | 0 | Current |
The bar is a genuine `role="progressbar"` with the `aria-value*` trio, and the visible fraction states the same fact for everyone else. The fill width is the only inline style because it is data, not decoration.