# Progress steps > Progress steps show where the user is in a short flow such as setup or onboarding, with done, active and upcoming steps. Use progress steps to display compact onboarding, checkout, and setup progress. Source: https://docs.tabler.io/ui/components/progress-step --- ## Default markup Use `.progress-steps` as the container and `.progress-steps-item` for each segment. ```html

``` The default structure: ```html

``` ## Variants ### Current and completed step Use color classes to mark completed steps. Set `aria-current="step"` on the current item. ```html

Step 1
Step 2
Step 3
Step 4

``` ### Custom labels Use hidden labels so assistive technologies can announce meaningful step names. ```html

Account
Profile
Billing
Review

``` ### Color state Use contextual background classes on completed and current items to match the state colors of your flow. ```html

Step 1
Step 2

Step 1
Step 2

Step 1
Step 2

``` ### Width and layout utilities Use utility classes on `.progress-steps` to control width and placement in layouts. ```html

Step 1
Step 2
Step 3
Step 4
Step 5

``` ## Accessibility - Say where the user is in text as well - "Step 2 of 4" next to the bar, or in a `visually-hidden` span. The filled shape alone does not carry it. - Mark the current step with `aria-current="step"`. - If you use the underlying progress bar to draw the line, give it `role="progressbar"` with the step number as `aria-valuenow` and the total as `aria-valuemax`. - Do not rely on the color of a circle to say "done". Add an icon or a word.