Radio Disabled

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-5">
    <!-- Enabled Radio -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-enabled" name="radio-state" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500" checked>
      <label for="radio-enabled" class="text-sm font-medium text-gray-700">Enabled Radio</label>
    </div>
    
    <!-- Disabled Radio (Unchecked) -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-disabled-unchecked" name="radio-state-disabled" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 opacity-50 cursor-not-allowed" disabled>
      <label for="radio-disabled-unchecked" class="text-sm font-medium text-gray-400 cursor-not-allowed">Disabled Radio (Unchecked)</label>
    </div>
    
    <!-- Disabled Radio (Checked) -->
    <div class="flex items-center gap-2">
      <input type="radio" id="radio-disabled-checked" name="radio-state-disabled" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 opacity-50 cursor-not-allowed" checked disabled>
      <label for="radio-disabled-checked" class="text-sm font-medium text-gray-400 cursor-not-allowed">Disabled Radio (Checked)</label>
    </div>
    
    <!-- Disabled Form Example -->
    <fieldset disabled class="mt-6 border border-gray-200 rounded-md p-4">
      <legend class="text-sm font-medium text-gray-500 px-2">Disabled Form Group</legend>
      
      <div class="space-y-3 mt-2">
        <div class="flex items-center gap-2">
          <input type="radio" id="option-a" name="disabled-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 cursor-not-allowed" checked>
          <label for="option-a" class="text-sm font-medium text-gray-400">Option A</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="option-b" name="disabled-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 cursor-not-allowed">
          <label for="option-b" class="text-sm font-medium text-gray-400">Option B</label>
        </div>
        
        <div class="flex items-center gap-2">
          <input type="radio" id="option-c" name="disabled-group" class="w-4 h-4 text-blue-600 border-gray-300 focus:ring-blue-500 cursor-not-allowed">
          <label for="option-c" class="text-sm font-medium text-gray-400">Option C</label>
        </div>
      </div>
    </fieldset>
  </div>
</section>