Radio Button Generator
Preview
Output format
Tailwind
1<div class="flex flex-col gap-[10px]">
2 <label class="flex items-center gap-2 cursor-pointer">
3 <div class="relative flex items-center justify-center">
4 <input type="radio" name="radioGroup" class="sr-only peer" checked/>
5 <div class="w-[20px] h-[20px] rounded-full border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:border-[#3b82f6] transition-all"></div>
6 <div class="absolute w-[8px] h-[8px] rounded-full bg-[#3b82f6] scale-0 peer-checked:scale-100 transition-transform"></div>
7 </div>
8 <span class="text-[16px] text-[#000000]">Option 1</span>
9 </label>
10 <label class="flex items-center gap-2 cursor-pointer">
11 <div class="relative flex items-center justify-center">
12 <input type="radio" name="radioGroup" class="sr-only peer" />
13 <div class="w-[20px] h-[20px] rounded-full border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:border-[#3b82f6] transition-all"></div>
14 <div class="absolute w-[8px] h-[8px] rounded-full bg-[#3b82f6] scale-0 peer-checked:scale-100 transition-transform"></div>
15 </div>
16 <span class="text-[16px] text-[#000000]">Option 2</span>
17 </label>
18 <label class="flex items-center gap-2 cursor-pointer">
19 <div class="relative flex items-center justify-center">
20 <input type="radio" name="radioGroup" class="sr-only peer" />
21 <div class="w-[20px] h-[20px] rounded-full border-[2px] border-[#3b82f6] bg-[#ffffff] peer-checked:border-[#3b82f6] transition-all"></div>
22 <div class="absolute w-[8px] h-[8px] rounded-full bg-[#3b82f6] scale-0 peer-checked:scale-100 transition-transform"></div>
23 </div>
24 <span class="text-[16px] text-[#000000]">Option 3</span>
25 </label>
26</div>