Vertical radio group with description

A vertical group of radio components with description.

27
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

Abdelmjid Saber

@abdelmjid

I love learning and creating something new fast, secure and clean code applications.