Tailwind CSS: Custom Checkboxes and Radio Buttons

Last updated on June 7, 2022 Pennywise Loading... One 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
1 Comment
Inline Feedbacks
View all comments
Bruh
Bruh
6 months ago

Thanks

Related Articles