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>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
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>1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More
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>
1000+ Tailwind Blocks
Access over 1,000 ready-made Tailwind blocks with modern designs to accelerate your design process.
Explore More