> For the complete documentation index, see [llms.txt](https://atd-dts.gitbook.io/atd-knack-operations/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://atd-dts.gitbook.io/atd-knack-operations/knack-code/looks/multipage-step-indicator.md).

# 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 %}