Home
Prajwal Hallale
Radio Buttons

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 CSS v3. It is responsive.

Input Radio

Author Prajwal Hallale

16.3k

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