<label class="group inline-flex text-gray-900 has-disabled:cursor-not-allowed has-disabled:dark:opacity-50 gap-2">
  <input type="checkbox" value="1" class="peer rounded-sm border border-gray-200 text-blue-500 focus:border-blue-500 focus:ring-3 focus:ring-blue-500/50 dark:border-gray-600 dark:bg-gray-800 dark:ring-offset-gray-900 dark:checked:border-transparent dark:checked:bg-blue-500 dark:focus:border-blue-500 size-4 mt-0.5">
  <span class="flex flex-col text-gray-900 dark:text-gray-100">
    <span class="flex items-center gap-[2px]">
      <span class="text-sm">Checkbox Label</span>
    </span>
  </span>
</label>