# Multipage Step Indicator

The step indicator is a useful form component when users fill out forms. For multipage forms, it allows them the ability to view what step of the form they are on. Using some CSS and HTML, you can wrap it as a list container. You can read about step indicator from the [USWDS website](https://designsystem.digital.gov/components/step-indicator/).

<figure><img src="/files/kD3jROjkyJp3lLG1YoMT" alt=""><figcaption></figcaption></figure>

On small screens/mobile devices:

<figure><img src="/files/kEuJkuttZppJpWC6jkmk" alt=""><figcaption></figcaption></figure>

## The JS

None

## The HTML

You can create a step indicator using Knack's Rich Text View and copy paste the list elements.

{% code lineNumbers="true" fullWidth="true" %}

```html
<div class="stepindicator">
	<ul class="progressbar">
		<li class="active">Application Information</li>
		<li>Background Information</li>
		<li>Attach <br>Documents</li>
		<li>Review <br>Application</li>
	</ul>
</div>
<p><br>
</p>
<p><span class="label-stepindicator">1</span>
	<span class="active-label-stepindicator"><strong>Application Information</strong></span>
</p>
```

{% endcode %}

##

## The CSS

The CSS is&#x20;

{% tabs %}
{% tab title="CSS - Step Indicator" %}
Add the CSS below. Modify **Line 52** `width: XX%` depending on how many list elements there are divided by 100%. Otherwise the step indicator bar widths will appear too small/large.

* 5 list items = 20%
* 4 list items = 25%
* 3 list items = 32%

{% code lineNumbers="true" fullWidth="true" %}

```css
/***************************/
/**** Step Indicator *******/
/***************************/
.stepindicator{
  width: 100%;
  z-index: 1;
  display: flex;
  position:static;
}
.label-stepindicator{
  display:inline-block;
  width: 1.5em;
  height:1.5em;
  background: #005EA2;
  border-radius: 50%;
  text-align: center;
  font-weight: bold;
  color: white;
  line-height: 1.5em;
  font-size:1.5em;
}

.active-label-stepindicator{
  font-weight: bold;
  font-size:1.5em;
  margin-left:20px;
}
.progressbar{
  counter-reset: step;
}

/* This is for the Circle number */
.progressbar li:before{
  content:counter(step);
  counter-increment: step;
  width: 30px;
  height: 30px;
  border: 2px solid #bebebe;
  display:block;
  border-radius: 50%;
  line-height: 26px;
  background: white;
  color: #bebebe;
  text-align: center;
  font-weight: bold;
}

/* This is for the bars */
.progressbar li{
  list-style-type: none;
  float: left;
  width: 25%;
  position: relative;
  text-align: left;
  margin-left: -5px;
}
.progressbar li + li {
  margin-top: unset;
}

.progressbar li:after{
  content: '';
  position: absolute;
  width:100%;
  height: 8px;
  background: #979797;
  top: 10px;
  left: -90%;
  z-index: -1;
}

/* Hides the first child bar */
.progressbar li:first-child:after{
  content: none;
}

.progressbar li.active + li:after{
  background: #005EA2;
}

.progressbar li.active::before{
  border: 2px solid white;
  background: #005EA2;
  color: white;
}
.progressbar li.active{
  font-weight: bold;
  color: #005EA2;
}
.progressbar li.inactive{
  font-weight: bold;
  color: #163f6e;
}
.progressbar li.inactive + li:after{
  background: #163f6e;
}

.progressbar li.inactive::before{
  border-color: white;
  background: #163f6e;
  color: white;
}
```

{% endcode %}
{% endtab %}

{% tab title="CSS - Mobile" %}
If you have mobile screens using the `@media` breakpoints and add additional CSS below.

{% code lineNumbers="true" fullWidth="true" %}

```css
/* For mobile screens step indicator */ 
@media only screen and (max-width: 600px) {
  .progressbar li:before{
    margin-top: -33px;
    line-height: 18px;
    width:20px;
    height:20px;
    border-width: 1px;
  }
  .progressbar li.active::before{
    border-width: 1px;
  }
  
  .progressbar li, .progressbar li.active, .progressbar li.inactive {
    font-size: 11px;
    padding-top: 15px;
  }
  
  .progressbar li:after{
    border-left: 1px solid white;
    height: 10px;
    margin-top: -2em;
  }

}
```

{% endcode %}

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/multipage-step-indicator.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.