 platform](https://res.cloudinary.com/practicaldev/image/fetch/s--xvjwNL2l--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e7muyuhb82vrh7jtcbhw.png)
We have all used a switch at least once in our life. It being to turn on/off the light, or maybe to turn an engine ON/OFF. Or maybe to change the state of a software component so as to show some details either when the switch is turn ON or OFF. But I believe you get the idea.
In this section, we are going to build this simple, yet highly useful component, of course using TailwindCSS only, no Javascript.
Understanding the Task
From our design above, we can see two different switches. Actually, it is supposed to be one switch that changes color depending on the state of whether it is ON or OFF. But I prefer having them separate for proper explanations. Of course, we can always join them as one, but that will surely be in a different tutorial section.
Structure of Code
As I always say, I have the same structure when it comes to designing components. Simply because I believe they somehow have the same root. 😃
This is how it goes
<body>
<!-- First Layer -->
<div>
<!-- Second Layer -->
<div>
<!-- First Switch -->
<div></div>
<!-- Second Switch -->
<div></div>
</div>
</div>
</body>
Don't mind the structure of our code, The only difference between the two switches is just their colors.
Let's build that switch up 😁
Switch Code
<!-- First Switch-->
<input type="checkbox" class="sr-only switch peer" name="check" id="check">
<label for="check" class="peer-checked:[&>div>div]:translate-x-[5.2rem]">
<div class="w-[10rem] bg-slate-300 rounded-full p-1.5 cursor-pointer border border-gray-400 mb-5 hover:shadow-[0rem_0rem_0.5rem_0.05rem_rgb(31,41,55)] transition duration-300">
<div class="w-[4rem] h-[4rem] rounded-full border-[1rem] border-gray-800 bg-white transition duration-500"></div>
</div>
</label>
Kinda Confusing right? 🤔
Let's remove all those TailwindCSS classes and see the underneath HTML itself, I believe it will be much clearer.
HTML CODE
<!-- First Switch-->
<!-- Checkbox-->
<input type="checkbox" name="check" id="check">
<!-- Label-->
<label for="check" class="">
<!-- Outer Circle-->
<div class="">
<!-- Inner Circle-->
<div class=""></div>
</div>
</label>
Yeah! This is all that is underneath that code we saw earlier. It is essentially a checkbox, a label and a container with a container inside.
The Checkbox helps us to determine the state of the switch, when checked, it is ON, when it is unchecked it is OFF, or vice versa. It all depends on you
The label helps us control the checkbox.
The Container (
div) with the container inside, as you might have guessed is our visual. it helps us see if the switch is ON or OFF, and somehow gives us a before look. with the innerdivbeing that rounded ball that moves left to right and back
I believe it makes more sense now.
Now let's add our classes progressively.
Inner Circle
<!-- First Switch-->
<!-- Checkbox-->
<input type="checkbox" name="check" id="check">
<!-- Label-->
<label for="check" class="">
<!-- Outer Circle-->
<div class="">
<!-- Inner Circle-->
NEW => <div class="w-[4rem] h-[4rem] rounded-full border-[1rem] border-gray-800 bg-white transition duration-500"></div>
</div>
</label>
At the level of the inner circle, we gave it a width and height of w-[4rem] and h-[4rem] respectively. A border-radius of rounded-full, a border of border-[1rem] and border-color of border-gray-800, and of course, added transition and duration
Outer Circle
<!-- First Switch-->
<!-- Checkbox-->
<input type="checkbox" name="check" id="check">
<!-- Label-->
<label for="check" class="">
<!-- Outer Circle-->
NEW => <div class="w-[10rem] bg-slate-300 rounded-full p-1.5 cursor-pointer border border-gray-400 mb-5 hover:shadow-[0rem_0rem_0.5rem_0.05rem_rgb(31,41,55)] transition duration-300">
<!-- Inner Circle-->
<div class="w-[4rem] h-[4rem] rounded-full border-[1rem] border-gray-800 bg-white transition duration-500"></div>
</div>
</label>
For the outer Circle, we did something similar to that of the inner circle, width of w-[10rem], border-radius of rounded-full, padding of p-1.5 and border.
We also added a custom shadow on hover of hover:shadow-[0rem_0rem_0.5rem_0.05rem_rgb(31,41,55)] and to make it all smooth, we added transition and duration of duration-300
Checkbox and Label
<!-- First Switch-->
<!-- Checkbox -->
NEW <input type="checkbox" class="sr-only switch peer" name="check" id="check">
<!-- Label -->
NEW <label for="check" class="peer-checked:[&>div>div]:translate-x-[5.2rem]">
<!-- Outer Circle-->
<div class="w-[10rem] bg-slate-300 rounded-full p-1.5 cursor-pointer border border-gray-400 mb-5 hover:shadow-[0rem_0rem_0.5rem_0.05rem_rgb(31,41,55)] transition duration-300">
<!-- Inner Circle-->
<div class="w-[4rem] h-[4rem] rounded-full border-[1rem] border-gray-800 bg-white transition duration-500"></div>
</div>
</label>
You might have noticed we added classes to both the input and label.
sr-only: This class gives custom properties to the checkbox, like position absolute width 1px height 1px etc. You can always check on this in the tailwindcss documentationpeer: The class peer, is what we will use to check the state of the checkbox at the level of the label
Let's talk about the label now.
peer-checked:[&>div>div]:translate-x-[5.2rem] You remember about peer we spoke seconds ago? here is how we use it now. The English behind this is, if the checkbox is checked, translate the inner circle along the x-axis by 5.2rem.
And that's it 😊.
As for the second switch, no big difference, just different colors that's all!
Conclusion
We just built a Simple, yet important and very useful SWITCH component with amazing images too, and we did all this without opening our CSS file😃. Thanks to Tailwindcss.
Many employers will need such components to be added to their websites, and right now you should be proud that you are one of those few who know how to build it in less than 5mins, and you can do that without even leaving your HTML document 😎.
You can have a Live preview on Codepen or find the code on GitHub
If you have any worries or suggestions, don’t hesitate to leave them in the comment section! 😊
See ya! 👋
Top comments (0)