Tailwind CSS: Custom Checkboxes and Radio Buttons

Last updated on June 7, 2022 Pennywise Loading... Post a comment

In Tailwind CSS, you can style custom checkboxes and radio buttons by using an official plugin named @tailwindcss/forms ((it is reliable and well maintained by the same team behind Tailwind CSS).

Installing

Install @tailwindcss/forms by executing the following command in the root directory of your project:

npm i @tailwindcss/forms

Open your tailwind.config.js file and add the plugin like so:

plugins: [
    // add this line
    require('@tailwindcss/forms')
],

If you want to get things ready quickly for learning or development purposes, just insert the following scripts to the <head></head> section of your HTML file:

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.tailwindcss.com?plugins=forms"></script>

Custom Checkboxes Example

Screenshot:

The code:

<body class="p-40 bg-yellow-100">
    <form class="space-y-5">
        <div>
            <input type="checkbox" checked name="checkbox-one" id="checkbox-one" class="bg-gray-200 hover:bg-gray-300 cursor-pointer 
    w-12 h-12 border-3 border-amber-500 focus:outline-none rounded-lg" />
            <label for="checkbox-one" class="ml-3">Checkbox One</label>
        </div>
        <div>
            <input type="checkbox" checked name="checkbox-two" id="checkbox-two" class="bg-amber-200 hover:bg-amber-400 cursor-pointer 
    w-12 h-12 border-3 border-rose-500 rounded-lg checked:bg-green-500" />
            <label for="checkbox-one" class="ml-3">Checkbox Two</label>
        </div>

        <div>
            <input type="checkbox" name="checkbox-three" id="checkbox-three" class="bg-pink-300 hover:bg-pink-400 cursor-pointer 
    w-12 h-12 border-3 border-rose-500 rounded-lg checked:bg-rose-600" />
            <label for="checkbox-one" class="ml-3">Checkbox Three</label>
        </div>
    </form>
</body>

Custom Radio Buttons Example

Screenshot:

The code:

<body class="p-40 bg-yellow-100">
    <form class="space-y-5">
        <idv>
            <input type="radio" checked="checked" name="radio" id="radio-one"
                class="w-12 h-12 bg-pink-300 checked:bg-rose-500 cursor-pointer" />
            <label for="radio-one" class="ml-2">Radio One</label>
        </idv>

        <div>
            <input type="radio" name="radio" id="radio-two"
                class="w-12 h-12 bg-amber-500 hover:bg-amber-700 checked:bg-rose-500 cursor-pointer" />
            <label for="radio-two" class="ml-2">Radio Two</label>
        </div>

        <div>
            <input type="radio" name="radio" id="radio-three"
                class="w-12 h-12 bg-green-400 hover:bg-yellow-700 checked:bg-rose-500 cursor-pointer" />
            <label for="radio-three" class="ml-2">Radio Three</label>
        </div>

        <div>
            <input type="radio" name="radio" id="radio-four"
                class="w-12 h-12 bg-purple-400 hover:bg-purple-700 checked:bg-rose-500 cursor-pointer" />
            <label for="radio-four" class="ml-2">Radio Four</label>
        </div>
    </form>
</body>

Conclusion

You’ve learned how to make custom checkboxes and radio buttons the fastest and easiest way by making use of the official plugin @tailwindcss/forms. If you’d like to explore more new and interesting stuff about frontend development, take a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments

Related Articles