Components
Radio
<div class="mx-auto space-y-3">
<div class="flex items-center space-x-2">
<input
type="radio"
id="example1"
name="radioGroup1"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example1" class="text-sm font-medium text-gray-700">Default</label>
</div>
<div class="flex items-center space-x-2">
<input
type="radio"
id="example2"
checked
name="radioGroup1"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example2" class="text-sm font-medium text-gray-700">Checked</label>
</div>
</div>
<div class="mx-auto space-y-3">
<div class="flex items-center space-x-2">
<input
type="radio"
id="example4"
disabled
name="radioGroup2"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example4" class="text-sm font-medium text-gray-700">Default</label>
</div>
<div class="flex items-center space-x-2">
<input
type="radio"
id="example5"
checked
disabled
name="radioGroup2"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example5" class="text-sm font-medium text-gray-700">Checked</label>
</div>
</div>
<div class="mx-auto space-y-2">
<div class="flex space-x-2">
<div class="flex h-5 items-center">
<input
type="radio"
id="example7"
name="checkGroup3"
checked
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
<label for="example7" class="text-sm">
<div class="font-medium text-gray-700">Radio01</div>
<p class="text-gray-500">This is a help message.</p>
</label>
</div>
<div class="flex space-x-2">
<div class="flex h-5 items-center">
<input
type="radio"
id="example8"
name="checkGroup3"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
<label for="example8" class="text-sm">
<div class="font-medium text-gray-700">Radio02</div>
<p class="text-gray-500">This is a help message.</p>
</label>
</div>
</div>
<div class="mx-auto max-w-xs">
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input
type="radio"
id="example9"
name="checkGroup4"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example9" class="flex w-full space-x-2 text-sm"> HTML </label>
</div>
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input
type="radio"
id="example10"
name="checkGroup4"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example10" class="flex w-full space-x-2 text-sm"> CSS </label>
</div>
<div class="flex items-center space-x-2 rounded p-2 hover:bg-gray-100">
<input
type="radio"
id="example11"
name="checkGroup4"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
<label for="example11" class="flex w-full space-x-2 text-sm"> Javascript </label>
</div>
</div>
<div class="mx-auto max-w-xs">
<div class="divide-y divide-gray-200 border-y border-gray-200">
<div class="flex justify-between space-x-2 py-3">
<label for="example12" class="text-sm">
<div class="font-medium text-gray-700">Radio01</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input
type="radio"
id="example12"
name="checkGroup5"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
</div>
<div class="flex justify-between space-x-2 py-3">
<label for="example13" class="text-sm">
<div class="font-medium text-gray-700">Radio02</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input
type="radio"
id="example13"
name="checkGroup5"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
</div>
<div class="flex justify-between space-x-2 py-3">
<label for="example14" class="text-sm">
<div class="font-medium text-gray-700">Radio03</div>
<p class="text-gray-500">This is a help message.</p>
</label>
<div class="flex h-5 items-center">
<input
type="radio"
id="example14"
name="checkGroup5"
class="h-4 w-4 rounded-full border-gray-300 text-primary-600 shadow-sm focus:border-primary-300 focus:ring focus:ring-primary-200 focus:ring-opacity-50 focus:ring-offset-0 disabled:cursor-not-allowed disabled:text-gray-400"
/>
</div>
</div>
</div>
</div>