Components
A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.
The default way to present a single option from a list.
<div class="flex">
<input type="radio" name="hs-default-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-default-radio">
<label for="hs-default-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Default radio</label>
</div>
<div class="flex">
<input type="radio" name="hs-default-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-checked-radio" checked>
<label for="hs-checked-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Checked radio</label>
</div>
Disabled radio.
<div class="flex opacity-40">
<input type="radio" name="hs-disabled-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-disabled-radio" disabled>
<label for="hs-disabled-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Disabled radio</label>
</div>
<div class="flex opacity-40">
<input type="radio" name="hs-disabled-radio" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-disabled-checked-radio" checked disabled>
<label for="hs-disabled-checked-radio" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Disabled checked radio</label>
</div>
A group of radio components.
<div class="flex gap-x-6">
<div class="flex">
<input type="radio" name="hs-radio-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-group-1" checked>
<label for="hs-radio-group-1" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Apple</label>
</div>
<div class="flex">
<input type="radio" name="hs-radio-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-group-2">
<label for="hs-radio-group-2" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Pear</label>
</div>
<div class="flex">
<input type="radio" name="hs-radio-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-group-3">
<label for="hs-radio-group-3" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Orange</label>
</div>
</div>
A vertical group of radio components.
<div class="flex flex-col gap-y-3">
<div class="flex">
<input type="radio" name="hs-radio-vertical-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-vertical-group-1" checked>
<label for="hs-radio-vertical-group-1" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Apple</label>
</div>
<div class="flex">
<input type="radio" name="hs-radio-vertical-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-vertical-group-2">
<label for="hs-radio-vertical-group-2" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Pear</label>
</div>
<div class="flex">
<input type="radio" name="hs-radio-vertical-group" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-vertical-group-3">
<label for="hs-radio-vertical-group-3" class="text-sm text-gray-500 ml-2 dark:text-gray-400">Orange</label>
</div>
</div>
<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-gray-800 dark:border-gray-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="ml-3">
<span class="block text-sm font-semibold text-gray-800 dark:text-gray-300">Delete</span>
<span id="hs-radio-delete-description" class="block text-sm text-gray-600 dark:text-gray-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-gray-800 dark:border-gray-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="ml-3">
<span class="block text-sm font-semibold text-gray-800 dark:text-gray-300">Archive</span>
<span id="hs-radio-archive-description" class="block text-sm text-gray-600 dark:text-gray-500">Notify me when this action happens.</span>
</label>
</div>
</div>
Radio components within form input stacked in a grid format.
<div class="grid sm:grid-cols-2 gap-2">
<label for="hs-radio-in-form" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-in-form">
<span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Default radio</span>
</label>
<label for="hs-radio-checked-in-form" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<input type="radio" name="hs-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-checked-in-form" checked>
<span class="text-sm text-gray-500 ml-3 dark:text-gray-400">Checked radio</span>
</label>
</div>
Checkbox components within form input vertically grouped.
<div class="grid space-y-2">
<label for="hs-vertical-radio-in-form" class="max-w-xs flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-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 ml-3 dark:text-gray-400">Default radio</p>
</label>
<label for="hs-vertical-radio-checked-in-form" class="max-w-xs flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-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 ml-3 dark:text-gray-400">Checked radio</p>
</label>
</div>
Checkbox placed on the right side.
<div class="grid sm:grid-cols-2 gap-2">
<label for="hs-radio-on-right" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<span class="text-sm text-gray-500 dark:text-gray-400">Default radio</span>
<input type="radio" name="hs-radio-on-right" class="shrink-0 ml-auto mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radio-on-right">
</label>
<label for="hs-radioradio-on-right" class="flex p-3 block w-full bg-white border border-gray-200 rounded-md text-sm focus:border-blue-500 focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400">
<span class="text-sm text-gray-500 dark:text-gray-400">Checked radio</span>
<input type="radio" name="hs-radio-on-right" class="shrink-0 ml-auto mt-0.5 border-gray-200 rounded-full text-blue-600 pointer-events-none focus:ring-blue-500 dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" id="hs-radioradio-on-right" checked>
</label>
</div>
Make the list item appear with checkbox.
<ul class="max-w-sm flex flex-col">
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-list-group-item-radio-1" name="hs-list-group-item-radio" type="radio" class="border-gray-200 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked>
</div>
<label for="hs-list-group-item-radio-1" class="ml-3 block w-full text-sm text-gray-600 dark:text-gray-500">
Chris Lynch
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-list-group-item-radio-2" name="hs-list-group-item-radio" type="radio" class="border-gray-200 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
</div>
<label for="hs-list-group-item-radio-2" class="ml-3 block w-full text-sm text-gray-600 dark:text-gray-500">
Maria Guan
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-list-group-item-radio-3" name="hs-list-group-item-radio" type="radio" class="border-gray-200 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
</div>
<label for="hs-list-group-item-radio-3" class="ml-3 block w-full text-sm text-gray-600 dark:text-gray-500">
Bob Arum
</label>
</div>
</li>
</ul>
Make a horizontal list group item appear with checkbox.
<ul class="flex flex-col sm:flex-row">
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-horizontal-list-group-item-radio-1" name="hs-horizontal-list-group-item-radio" type="radio" class="border-gray-200 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800" checked>
</div>
<label for="hs-horizontal-list-group-item-radio-1" class="ml-3 block w-full text-sm text-gray-600 dark:text-gray-500">
Chris Lynch
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-horizontal-list-group-item-radio-2" name="hs-horizontal-list-group-item-radio" type="radio" class="border-gray-200 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
</div>
<label for="hs-horizontal-list-group-item-radio-2" class="ml-3 block w-full text-sm text-gray-600 dark:text-gray-500">
Maria Guan
</label>
</div>
</li>
<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-white border text-gray-800 -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ml-px sm:mt-0 sm:first:rounded-tr-none sm:first:rounded-bl-lg sm:last:rounded-bl-none sm:last:rounded-tr-lg dark:bg-gray-800 dark:border-gray-700 dark:text-white">
<div class="relative flex items-start w-full">
<div class="flex items-center h-5">
<input id="hs-horizontal-list-group-item-radio-3" name="hs-horizontal-list-group-item-radio" type="radio" class="border-gray-200 rounded-full dark:bg-gray-800 dark:border-gray-700 dark:checked:bg-blue-500 dark:checked:border-blue-500 dark:focus:ring-offset-gray-800">
</div>
<label for="hs-horizontal-list-group-item-radio-3" class="ml-3 block w-full text-sm text-gray-600 dark:text-gray-500">
Bob Arum
</label>
</div>
</li>
</ul>