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.

On small screens/mobile devices:

The JS

None

The HTML

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

<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>

The CSS

The CSS is

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%

/***************************/
/**** 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;
}

CSS - Mobile

If you have mobile screens using the @media breakpoints and add additional CSS below.

/* 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;
  }

}