Component

Tailwind CSS Radio Button

Whenever you want used to go through multiple choice and select only one of those options; in that scenario radio buttons can be used. It lets you check all available option and select only one from that set of options.

Requires Pagedone CSS

This component requires the use of our Pagedone UI as a package, else you can skip this message if you are already using Pagedone UI as a package.

Default Radio button

It is the most common and default way to present radio buttons where one option from the available list can be picked. Use below tailwind custom radio buttons if you want customization in radios.

<div class="flex items-center">
      <input id="radio1" type="radio" name="default-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio1" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Default radio 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio2" type="radio" name="default-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
      <label for="radio2" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Checked radio 
      </label>
      </div>

Disabled

Disabled attribute can be used when you want to disallow users to select options from the radio buttons.

<div class="flex items-center">
      <input id="radio1" type="radio" name="disabled-radio" class="hidden disabled:cursor-not-allowed disabled:border disabled:border-gray-200  disabled:rounded-md disabled:bg-gray-100" disabled>
      <label for="radio1" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Default radio 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio2" type="radio" name="disabled-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked disabled>
      <label for="radio2" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Checked radio 
      </label>
      </div>

Radio Group

Use following tailwind radio group example to create a group of radio buttons horizontally.

<div class="flex items-center">
      <input id="radio-group-1" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-group-1" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal whitespace-nowrap">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-group-2" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-group-2" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal whitespace-nowrap">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-group-3" type="radio" name="radio-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-group-3" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal whitespace-nowrap">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>

Vertical Radio Group

Following are radio group in tailwind css to create a vertical group of radio buttons.

<div class="flex items-center">
      <input id="radio-vertical-group-1" type="radio" name="radio-vertical-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
      <label for="radio-vertical-group-1" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-vertical-group-2" type="radio" name="radio-vertical-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-vertical-group-2" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-vertical-group-3" type="radio" name="radio-vertical-group" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-vertical-group-3" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>

List With Description

Here, In Tailwind Radio Buttons each of the options you can add description to make it more explanatory for the user to understand and select appropriately from the available choices.

<div class="flex items-center">
      <input id="radio-des-group-1" type="radio" name="radio-with-description" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-des-group-1" class="flex items-start cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 mt-1"></span>
      <div class="block">
      <h5 class="w-full text-sm font-normal text-gray-600">Kiwi</h5>
      <p class="text-sm font-normal text-gray-400 mt-1 w-full">Used for selecting only one option</p>
      </div>
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-des-group-2" type="radio" name="radio-with-description" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked>
      <label for="radio-des-group-2" class="flex items-start cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 mt-1"></span>
      <div class="block">
      <h5 class="w-full text-sm font-normal text-gray-600">Jackfruit</h5>
      <p class="text-sm font-normal text-gray-400 mt-1 w-full">Used for selecting only one option</p>
      </div>
      </label>
      </div>

Radio button Sizes

As per your preference you can keep small, medium or large radio button size, Use below radio button tailwind css example. 

<div class="flex items-center">
      <input id="radio-small" type="radio" name="radio-size" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-small" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> small 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-medium" type="radio" name="radio-size" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-medium" class="flex items-center cursor-pointer text-gray-600 text-base font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-5 h-5 "></span> Medium 
      </label>
      </div>
      <div class="flex items-center">
      <input id="radio-large" type="radio" name="radio-size" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="radio-large" class="flex items-center cursor-pointer text-gray-600 text-lg font-normal">
      <span class="border border-gray-300  rounded-full mr-2 w-6 h-6 "></span> Large 
      </label>
      </div>

Radio within form input

Radio buttons in Tailwind can be implemented in the form also

<div class="grid sm:grid-cols-2 gap-2">
      <div class="block">
      <input type="radio" name="radio-in-form" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="radio-in-form-1">
      <label for="radio-in-form-1" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm ">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 mt-0.5"></span>
      <h5 class="text-sm text-gray-500">Default radio</h5>
      </label>
      </div>
      <div class="block">
      <input type="radio" name="radio-in-form" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="radio-in-form-2" checked>
      <label for="radio-in-form-2" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm ">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 mt-0.5"></span>
      <h5 class="text-sm text-gray-500">Checked radio</h5>
      </label>
      </div>

On Right

When buttons are placed on the right side of the description and options.

<div class="grid sm:grid-cols-2 gap-2">
      <div class="block">
      <input type="radio" name="radio-right" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="radio-on-right-1">
      <label for="radio-on-right-1" class="flex flex-row-reverse p-3 block w-full bg-white border border-gray-200 rounded-md text-sm ">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 mt-0.5 ml-auto"></span>
      <h5 class="text-sm text-gray-500">Default radio</h5>
      </label>
      </div>
      <div class="block">
      <input type="radio" name="radio-right" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" id="radio-on-right-2" checked>
      <label for="radio-on-right-2" class="flex flex-row-reverse p-3 block w-full bg-white border border-gray-200 rounded-md text-sm ">
      <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 mt-0.5 ml-auto"></span>
      <h5 class="text-sm text-gray-500">Checked radio</h5>
      </label>
      </div>

With list group

In this tailwind style radio button you can make all list items appear with radio buttons.

<ul class="w-fit flex flex-col">
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-600 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <div class="flex items-center">
      <input id="list-group-item-radio-1" type="radio" name="list-group-item-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked="">
      <label for="list-group-item-radio-1" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
        <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <div class="flex items-center">
      <input id="list-group-item-radio-2" type="radio" name="list-group-item-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="list-group-item-radio-2" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
        <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg ">
      <div class="flex items-center">
      <input id="list-group-item-radio-3" type="radio" name="list-group-item-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="list-group-item-radio-3" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
        <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      </li>
      </ul>

With Horizontal List Group

You can display Tailwind CSS Radio Buttons as a group items in a horizontal way.

<ul class="flex flex-col sm:flex-row">
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-600 -mt-px first:rounded-t-full first:mt-0 last:rounded-b-full sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-full sm:last:rounded-bl-none sm:last:rounded-tr-full ">
      <div class="flex items-center">
      <input id="horizontal-list-group-item-radio-1" type="radio" name="horizontal-list-group-item-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100" checked="">
      <label for="horizontal-list-group-item-radio-1" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
        <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button 
      </label>
      </div>
      </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-full first:mt-0 last:rounded-b-full sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-full sm:last:rounded-bl-none sm:last:rounded-tr-full  ">
      <div class="flex items-center">
      <input id="horizontal-list-group-item-radio-2" type="radio" name="horizontal-list-group-item-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="horizontal-list-group-item-radio-2" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
        <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button
      </label>
      </div>
      </li>
      <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-full first:mt-0 last:rounded-b-full sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-full sm:last:rounded-bl-none sm:last:rounded-tr-full ">
      <div class="flex items-center">
      <input id="horizontal-list-group-item-radio-3" type="radio" name="horizontal-list-group-item-radio" class="hidden checked:bg-no-repeat checked:bg-center checked:border-indigo-500 checked:bg-indigo-100">
      <label for="horizontal-list-group-item-radio-3" class="flex items-center cursor-pointer text-gray-600 text-sm font-normal">
        <span class="border border-gray-300  rounded-full mr-2 w-4 h-4 "></span> Radio button
      </label>
      </div>
      </li>
      </ul>