Radio Buttons

Users can click anywhere on the input field to select the radio option

This tailwind example is contributed by Prajwal Hallale, on 18-Jul-2022. Component is made with Tailwind v3.4. It is responsive.

Input Radio

Author Prajwal Hallale

Tailwind v3.4 17.1k 11

Fork Fullscreen

<div class="border rounded-md p-4 w-full mx-auto max-w-2xl">
    <h4 class="text-xl lg:text-2xl font-semibold">
        Select Your Country
    </h4>

<div>
        <label class="flex bg-gray-100 text-gray-700 rounded-md px-3 py-2 my-3  hover:bg-indigo-300 cursor-pointer ">
             <input type="radio" name="Country">
             <i class="pl-2">Germany</i>
        </label>

<label class="flex bg-gray-100 text-gray-700 rounded-md px-3 py-2 my-3  hover:bg-indigo-300 cursor-pointer ">
            <input type="radio" name="Country">
            <i class="pl-2">France</i>
        </label>

<label class="flex bg-gray-100 text-gray-700 rounded-md px-3 py-2 my-3  hover:bg-indigo-300 cursor-pointer ">
              <input type="radio" name="Country">
              <i class="pl-2">United Kingdom</i>
         </label>

<label class="flex bg-gray-100 text-gray-700 rounded-md px-3 py-2 my-3  hover:bg-indigo-300 cursor-pointer ">
              <input type="radio" name="Country">
              <i class="pl-2">Netherlands</i>
        </label>

</div>
</div>

Related Examples

Tailwind CSS Radio Button Cards

Prashant

4 years ago

13.1k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

3 years ago

10.9k
Radio Button Group for Search Filters
set of radio buttons grouped for selecting different search filters

Prajwal Hallale

2 years ago

5.7k
Yes / No radio input with reset button

Kris Showen

3 years ago

11k
Toggle button

Matthew Chen

3 years ago

13.4k
Google like input field
with Floating Label. The input placeholder floats towards the upside as the input field is in focus.

Samuel Dawson

3 years ago

18.6k
Date picker
Date picker example using flatpickr library

Lîmåã M

3 years ago

18.2k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.2k
Select input

Sophia Baker

3 years ago

15.1k
Colored checkboxes
use custom accent color according to your design

Pixel Perfect

2 years ago

6.1k
Comment section

Manuela Bianka

4 years ago

12.3k
Checkbox button
press the button to check

Anonymous

2 years ago

5.4k