Published on

6 Easy Ways To Make A Custom Radio Button With Tailwind CSS Without Even Thinking About It

Tags
Inputs
Custom Radio button

As a FrontEnd technology blogger, I'm always on the lookout for ways to make my UI components look better. One of the UI components that I've been working on lately is the radio button. Radio buttons are an essential part of any form, and they are often overlooked when it comes to design. In this article, I'll show you how to make a custom radio button with Tailwind CSS without even thinking about it.

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework that allows you to quickly build custom UI components. It provides you with a set of pre-defined classes that you can use to style your HTML elements. Tailwind CSS is designed to be highly customizable, which means that you can easily modify the default styles to match your design requirements.

The description of Custom Radio button ui component

A custom radio button UI component is a modified version of the standard radio button that allows you to add custom styles. It can be used to make your radio buttons look more attractive and match your overall design. Custom radio buttons are easy to create with Tailwind CSS, and you don't need any prior knowledge of CSS to get started.

Why use Tailwind CSS to create a Custom Radio button ui component?

Tailwind CSS is an excellent choice for creating custom radio buttons because it provides you with a set of pre-defined classes that you can use to style your buttons. This means that you don't need to write any CSS code from scratch, which saves you a lot of time and effort. Additionally, Tailwind CSS is highly customizable, which means that you can easily modify the default styles to match your design requirements.

The preview of Custom Radio button ui component.

To give you an idea of what a custom radio button UI component looks like, here's a preview:

Free download of the Custom Radio button's source code

The source code of Custom Radio button ui component.

To create a custom radio button UI component with Tailwind CSS, you need to add some classes to your HTML code. Here's an example of what the code looks like:

<style>

.radio input ~ label {
  background-color: rgb(233, 225, 225);
  color: rgb(158, 146, 146);
}
.radio input:checked ~ label {
  background-color: rgb(70, 230, 22);
  color: white;
}
</style>

<form>
  <div class="px-2 w-full min-h-screen flex justify-center items-center">
    <div class="mb-2">
      <label for="entry" class="block text-gray-700 text-sm lg:text-base font-semibold mb-2">
        Your Answer:
      </label>
      <div class="w-full">
        <div class="grid grid-cols-6 xl:grid-cols-12 gap-2 w-full">
          <div class="inline-block radio">
            <input
              name="answer"
              type="radio"
              id="B1"
              hidden="hidden"
              value="B"
            />
            <label
              for="B1"
              class="px-2 py-1 rounded-lg flex justify-center items-center text-3xl lg:text-5xl font-bold w-10 h-10 lg:w-14 lg:h-14"
            >
              B
            </label>
          </div>
          <div class="inline-block radio">
            <input
              name="answer"
              type="radio"
              id="C1"
              hidden="hidden"
              value="C"
            />
            <label
              for="C1"
              class="px-2 py-1 rounded-lg flex justify-center items-center text-3xl lg:text-5xl font-bold w-10 h-10 lg:w-14 lg:h-14"
            >
              C
            </label>
          </div>
          <div class="inline-block radio">
            <input
              name="answer"
              type="radio"
              id="D1"
              hidden="hidden"
              value="D"
            />
            <label
              for="D1"
              class="px-2 py-1 rounded-lg flex justify-center items-center text-3xl lg:text-5xl font-bold w-10 h-10 lg:w-14 lg:h-14"
            >
              D
            </label>
          </div>
        </div>
      </div>
      
    </div>
  </div>
</form>

How to create a Custom Radio button with Tailwind CSS?

Now that you know what a custom radio button UI component is and why you should use Tailwind CSS to create it, let's take a look at how to create one. There are several ways to create a custom radio button with Tailwind CSS, and I'll show you six easy ways to do it.

1. Using the default styles

The easiest way to create a custom radio button with Tailwind CSS is to use the default styles. To do this, you need to add the form-radio class to your radio button element. Here's an example:

<label class="inline-flex items-center">
  <input type="radio" class="form-radio" name="radio" value="1">
  <span class="ml-2">Option 1</span>
</label>

2. Changing the color

To change the color of your custom radio button, you need to use the text- classes. Here's an example:

<label class="inline-flex items-center">
  <input type="radio" class="form-radio text-red-500" name="radio" value="1">
  <span class="ml-2">Option 1</span>
</label>

3. Adding an icon

To add an icon to your custom radio button, you need to use the inline-flex class and the items-center class. Here's an example:

<label class="inline-flex items-center">
  <input type="radio" class="form-radio" name="radio" value="1">
  <svg class="w-4 h-4 ml-2 text-gray-700" viewBox="0 0 20 20" fill="currentColor">
    <path fill-rule="evenodd" d="M10 0a10 10 0 1 0 10 10A10 10 0 0 0 10 0zm0 18.75A8.75 8.75 0 1 1 10 1.25 8.75 8.75 0 0 1 10 18.75z" clip-rule="evenodd" />
  </svg>
  <span class="ml-2">Option 1</span>
</label>

4. Changing the size

To change the size of your custom radio button, you need to use the w- and h- classes. Here's an example:

<label class="inline-flex items-center">
  <input type="radio" class="form-radio w-5 h-5" name="radio" value="1">
  <span class="ml-2">Option 1</span>
</label>

5. Adding a border

To add a border to your custom radio button, you need to use the border and rounded-full classes. Here's an example:

<label class="inline-flex items-center">
  <input type="radio" class="form-radio border-2 rounded-full" name="radio" value="1">
  <span class="ml-2">Option 1</span>
</label>

6. Changing the background color

To change the background color of your custom radio button, you need to use the bg- classes. Here's an example:

<label class="inline-flex items-center">
  <input type="radio" class="form-radio bg-red-500" name="radio" value="1">
  <span class="ml-2">Option 1</span>
</label>

Conclusion

In this article, we've learned how to make a custom radio button with Tailwind CSS without even thinking about it. We've covered what Tailwind CSS is, why you should use it to create custom radio buttons, and how to create them using six easy ways. With these techniques, you can easily create custom radio buttons that match your overall design and look great.