Checkbox States

                    <div class="p-6 space-y-6 bg-white rounded-lg">
  <!-- Default State -->
  <div class="flex items-center">
    <input id="checkbox-default" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2">
    <label for="checkbox-default" class="ml-2 text-sm font-medium text-gray-700">Default state</label>
  </div>
  
  <!-- Checked State -->
  <div class="flex items-center">
    <input id="checkbox-checked" type="checkbox" checked class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2">
    <label for="checkbox-checked" class="ml-2 text-sm font-medium text-gray-700">Checked state</label>
  </div>
  
  <!-- Indeterminate State -->
  <div class="flex items-center">
    <input id="checkbox-indeterminate" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2">
    <label for="checkbox-indeterminate" class="ml-2 text-sm font-medium text-gray-700">Indeterminate state</label>
  </div>
  
  <!-- Disabled State (Unchecked) -->
  <div class="flex items-center">
    <input id="checkbox-disabled" type="checkbox" disabled class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 cursor-not-allowed opacity-50">
    <label for="checkbox-disabled" class="ml-2 text-sm font-medium text-gray-400">Disabled state (unchecked)</label>
  </div>
  
  <!-- Disabled State (Checked) -->
  <div class="flex items-center">
    <input id="checkbox-disabled-checked" type="checkbox" checked disabled class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 cursor-not-allowed opacity-50">
    <label for="checkbox-disabled-checked" class="ml-2 text-sm font-medium text-gray-400">Disabled state (checked)</label>
  </div>
  
  <!-- Focus State (use Tab key to focus) -->
  <div class="flex items-center">
    <input id="checkbox-focus" type="checkbox" class="w-4 h-4 text-blue-600 bg-gray-100 rounded border-gray-300 focus:ring-blue-500 focus:ring-2 focus:ring-offset-2">
    <label for="checkbox-focus" class="ml-2 text-sm font-medium text-gray-700">Focus state (use Tab key)</label>
  </div>
  
  <!-- Error State -->
  <div class="flex items-center">
    <input id="checkbox-error" type="checkbox" class="w-4 h-4 text-red-600 bg-red-50 rounded border-red-500 focus:ring-red-500 focus:ring-2">
    <label for="checkbox-error" class="ml-2 text-sm font-medium text-red-600">Error state</label>
    <span class="ml-1 text-xs text-red-500">Required field</span>
  </div>
  
  <!-- JavaScript for indeterminate state -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      document.getElementById('checkbox-indeterminate').indeterminate = true;
    });
  </script>
</div>