A step-by-step guide to building a responsive wizard component using only HTML & CSS.
A wizard component is basically a component that shows a set of small actions/steps that need to be done in an order to complete one big task. For example, buying a product online is usually a multiple-step procedure that includes selecting the product first, providing the shipping information, making the payment, and lastly confirming the purchase.
In such cases, a neatly designed wizard component can guide the user through the process and also indicate the amount of progress the user has made during the process.
In this article, we are going to discuss how to create a responsive wizard component using only HTML and CSS.
Our wizard component will have the following parts:
So, without further ado, let’s get started.
First, we will look at the HTML that will create the structure of the wizard.
Wizard component HTML structure
In the above structure, I have used a
<ul>(unordered list) tag as the container and the steps in the wizard is added as the
<li>(list item) tag which contains the label and the step number.
The list items will use different style classes in order to show the difference between the different states of a step i.e. whether a step is currently active or completed or in a pending state. Here is how we are going to handle those states:
activeclass. It will be the first step when the process starts.
completedclass. With the step being completed, the checkmark will then be shown instead of the step counter to indicate that the step is complete.
completedclass, and thus the checkmarks will be shown for each of them.