Enhancing User Experience: Creating Custom Checkboxes with Tailwind CSS and React
Tags: tutorial, react, tailwindcss, forms
Published: 2023-11-13 16:02:32

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](https://create-react-app.dev/) and [Tailwindcss](https://tailwindcss.com/) installed. Additionally, incorporate the tailwindcss/forms plugin for a streamlined approach to styling form elements.

```bash
npm install -D tailwindcss/forms
```

Then add the plugin to your tailwind.config.js file:

```javascript
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}
```

## Crafting the HTML Structure and Applying Basic Styling


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


![unaligned custom checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gpnn97to1e4vn3ek3865.png)


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

```javascript
<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. 🚀

![final custom checkbox](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m9kc0g513valvhizpn8z.png)


I hope this was helpful for you!