Enhancing User Experience: Creating Custom Checkboxes with Tailwind CSS and React

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!