Building Tailwind CSS checkbox and radio input fields

#tailwindcss #tutorial #webdev #opensource

Ever since I've been using Tailwind CSS it has completely changed my way of building user interfaces and as things stand right now, I can't imagine going back to an OOCSS framework, such as Bootstrap. It's just faster.

One disadvantage that I have encountered, however, is that there are no components to get started with right away. I know that Tailwind CSS is supposed to be a utility-first framework, but that doesn't mean a couple of commonly used web components, such as buttons, dropdowns, forms wouldn't be helpful.

That is why I have started a Tailwind CSS components tutorial series here at the DEV community. Last time I showed you how to build a form with input fields with Tailwind CSS and today I will show you how to build checkbox and radio input elements.

Let's get started!

Tailwind CSS checkbox

First things first, let's build the HTML markup for the checkbox fields.

<div>
      <input id="flowbite" aria-describedby="flowbite" type="checkbox">
      <label for="flowbite">I love how Flowbite works</label>
</div>

I've added an extra div element so that we can wrap the input and label elements.

Let's now add some styles to the checkbox element:

<div>
      <input class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" id="flowbite" aria-describedby="flowbite" type="checkbox">
      <label for="flowbite">I love how Flowbite works</label>
</div>

Pretty cool. You can of course decide whether you want to use blue or another color.

Now let's also add some style to the label element:

<div>
      <input class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" id="flowbite" aria-describedby="flowbite" type="checkbox">
      <label class="text-sm ml-3 font-medium text-gray-900" for="flowbite">I love how Flowbite works</label>
</div>

Lastly, we should also add some style to the wrapper div element:

<div class="flex items-start items-center">
      <input class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" id="flowbite" aria-describedby="flowbite" type="checkbox">
      <label class="text-sm ml-3 font-medium text-gray-900" for="flowbite">I love how Flowbite works</label>
</div>

Awesome! You've created a checkbox element using Tailwind CSS.

Here's an example of a fieldset with multiple checkbox elements that you can use:


<fieldset>
<legend class="sr-only">Checkbox variants</legend>

  <div class="flex items-center items-start mb-4">
      <input id="checkbox-1" aria-describedby="checkbox-1" type="checkbox" class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" checked="">
      <label for="checkbox-1" class="text-sm ml-3 font-medium text-gray-900">I agree to the <a href="#" class="text-blue-600 hover:underline">terms and conditions</a></label>
  </div>

  <div class="flex items-start items-center mb-4">
      <input id="checkbox-2" aria-describedby="checkbox-2" type="checkbox" class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded">
      <label for="checkbox-2" class="text-sm ml-3 font-medium text-gray-900">I want to get promotional offers</label>
  </div>

  <div class="flex items-start items-center mb-4">
      <input id="checkbox-3" aria-describedby="checkbox-3" type="checkbox" class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded">
      <label for="checkbox-3" class="text-sm ml-3 font-medium text-gray-900">I am 18 years or older</label>
  </div>

  <div class="flex items-start mb-4">
    <div class="flex items-center h-5">
      <input id="shipping-2" aria-describedby="shipping-2" type="checkbox" class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded">
    </div>
    <div class="text-sm ml-3">
      <label for="shipping-2" class="font-medium text-gray-900">Free shipping via Flowbite</label>
      <div class="text-gray-500"><span class="font-normal text-xs">For orders shipped from Flowbite from <span class="font-medium">€ 25</span> in books or <span>€ 29</span> on other categories</span></div>
    </div>
  </div>

  <div class="flex items-start items-center">
      <input id="international-shipping-disabled" aria-describedby="international-shipping-disabled" type="checkbox" class="bg-gray-50 border-gray-300 focus:ring-3 focus:ring-blue-300 h-4 w-4 rounded" disabled="">
      <label for="international-shipping-disabled" class="text-sm ml-3 font-medium text-gray-400">Eligible for international shipping (disabled)</label>
  </div>
</fieldset>

The final result should look like this:

Tailwind CSS radio

The next element that we will build is very similar to the first one, but this time it's going to be a radio type.

A radio input field is different from a checkbox one because when put together with other radio inputs in the same form you can only select one option, whereas with the checkbox elements you can choose as many as you want.

Here's a fieldset of radio inputs that you can use in terms of styling:

<fieldset>
  <legend class="sr-only">
    Countries
  </legend>

  <div class="flex items-center mb-4">
    <input id="country-option-1" type="radio" name="countries" value="USA" class="h-4 w-4 border-gray-300 focus:ring-2 focus:ring-blue-300" aria-labelledby="country-option-1" aria-describedby="country-option-1" checked>
    <label for="country-option-1" class="text-sm font-medium text-gray-900 ml-2 block">
      United States
    </label>
  </div>

  <div class="flex items-center mb-4">
    <input id="country-option-2" type="radio" name="countries" value="Germany" class="h-4 w-4 border-gray-300 focus:ring-2 focus:ring-blue-300" aria-labelledby="country-option-2" aria-describedby="country-option-2">
    <label for="country-option-2" class="text-sm font-medium text-gray-900 ml-2 block">
      Germany
    </label>
  </div>

  <div class="flex items-center mb-4">
    <input id="country-option-3" type="radio" name="countries" value="Spain" class="h-4 w-4 border-gray-300 focus:ring-2 focus:ring-blue-300" aria-labelledby="country-option-3" aria-describedby="country-option-3">
    <label for="country-option-3" class="text-sm font-medium text-gray-900 ml-2 block">
      Spain
    </label>
  </div>

  <div class="flex items-center mb-4">
    <input id="country-option-4" type="radio" name="countries" value="United Kingdom" class="h-4 w-4 border-gray-300 focus:ring-2 focus:ring-blue-300" aria-labelledby="country-option-4" aria-describedby="country-option-4">
    <label for="country-option-4" class="text-sm font-medium text-gray-900 ml-2 block">
      United Kingdom
    </label>
  </div>

  <div class="flex items-center">
    <input id="option-disabled" type="radio" name="countries" value="China" class="h-4 w-4 border-gray-200 focus:ring-2 focus:ring-blue-300" aria-labelledby="option-disabled" aria-describedby="option-disabled" disabled>
    <label for="option-disabled" class="text-sm font-medium text-gray-400 ml-2 block">
      China (disabled)
    </label>
  </div>
</fieldset>

The final result should look like this:

Flowbite - Tailwind CSS component library

I hope that this tutorial helps you with your web dev journey and your project. Allow me to inform you that these Tailwind CSS checkbox and Tailwind CSS radio components are part of a larger and open-source Tailwind CSS component library called Flowbite.

Feel free to check it out as it includes hundreds of components using the utility-first classes from Tailwind CSS. You can also choose to clone it from the official Github Repository.