Radio within form input vertically
Checkbox components within form input vertically grouped.
100
0
HTML +
Tailwind
<div class="grid space-y-2">
<label for="hs-vertical-radio-in-form" class="max-w-xs flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
<input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-vertical-radio-in-form">
<span class="text-sm text-gray-500 ms-3 dark:text-neutral-400">Default radio</span>
</label>
<label for="hs-vertical-radio-checked-in-form" class="max-w-xs flex p-3 w-full bg-white border border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400">
<input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-vertical-radio-checked-in-form" checked="">
<span class="text-sm text-gray-500 ms-3 dark:text-neutral-400">Checked radio</span>
</label>
</div>
![Abdelmjid Saber](https://tailwindcraft.com/storage/profile-photos/JRDITVcVSx1U828EhxCQG5kbaOHDdUzpibzBOESn.png)
Abdelmjid Saber
@abdelmjidI love learning and creating something new fast, secure and clean code applications.