Checkboxes are a fundamental component of web forms, but their default appearance can often lack visual appeal. Thankfully, leveraging the versatility of Tailwind CSS allows you to effortlessly craft custom checkboxes, elevating the overall user experience on your website.
Prerequisites
Before diving into customization, ensure you have React and Tailwindcss installed. Additionally, incorporate the tailwindcss/forms plugin for a streamlined approach to styling form elements.
npm install -D tailwindcss/forms
Then add the plugin to your tailwind.config.js file:
// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
}
Crafting the HTML Structure and Applying Basic Styling
<div className="relative">
<input
className="text-violet-500 focus:ring-violet-300 border-gray-300 peer rounded-lg w-6 h-6 "
id="custom-checkbox"
name="custom-checkbox"
type="checkbox"
value="custom-checkbox"
/>
<label
className="w-[400px] h-[80px] cursor-pointer flex flex-row justify-between items-center border rounded-lg p-4 "
htmlFor="custom-checkbox"
>
<div className="flex flex-row justify-between items-center w-[380px] ml-10 mr-4">
<div>
<h3 className="font-bold">Online service</h3>
<p className="text-sm text-gray-400">Access to multiplayer games</p>
</div>
<p className="font-bold text-violet-600">$10/mo</p>
</div>
</label>
</div>
Understanding the Power of peer Class
To improve alignment, use the position: absolute style
on the input element, ensuring it aligns correctly within the label. The peer
class in Tailwind is crucial for styling an element based on the state of a sibling element. In this case, it helps manage the style of the label when the input is checked.
<div className="relative">
<input
className="text-violet-500 focus:ring-violet-300 border-gray-300 peer rounded-lg w-6 h-6 absolute top-7 left-4 "
id="custom-checkbox"
name="custom-checkbox"
type="checkbox"
value="custom-checkbox"
/>
<label
className="w-[400px] h-[80px] cursor-pointer flex flex-row justify-between items-center border rounded-lg p-4
active:bg-violet-700
peer-focus:outline-none peer-focus:ring peer-focus:ring-violet-300
peer-checked:border-violet-300 peer-checked:bg-violet-100
hover:bg-violet-100"
htmlFor="custom-checkbox"
>
<div className="flex flex-row justify-between items-center w-[380px] ml-10 mr-4">
<div>
<h3 className="font-bold">Online service</h3>
<p className="text-sm text-gray-400">Access to multiplayer games</p>
</div>
<p className="font-bold text-violet-600">$10/mo</p>
</div>
</label>
</div>;
Now, the custom checkbox input is not only visually appealing but also properly aligned, providing a seamless user experience. 🚀
I hope this was helpful for you!
Top comments (0)