Vertical radio group with description
A vertical group of radio components with description.
89
0
HTML +
Tailwind
<div class="grid space-y-3">
<div class="relative flex items-start">
<div class="flex items-center h-5 mt-1">
<input id="hs-radio-delete" name="hs-radio-with-description" type="radio" class="border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" aria-describedby="hs-radio-delete-description" checked="">
</div>
<label for="hs-radio-delete" class="ms-3">
<span class="block text-sm font-semibold text-gray-800 dark:text-neutral-300">Delete</span>
<span id="hs-radio-delete-description" class="block text-sm text-gray-600 dark:text-neutral-500">Notify me when this action happens.</span>
</label>
</div>
<div class="relative flex items-start">
<div class="flex items-center h-5 mt-1">
<input id="hs-radio-archive" name="hs-radio-with-description" type="radio" class="border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-neutral-800 dark:border-neutral-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" aria-describedby="hs-radio-archive-description">
</div>
<label for="hs-radio-archive" class="ms-3">
<span class="block text-sm font-semibold text-gray-800 dark:text-neutral-300">Archive</span>
<span id="hs-radio-archive-description" class="block text-sm text-gray-600 dark:text-neutral-500">Notify me when this action happens.</span>
</label>
</div>
</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.