Checkbox

<div class="mx-auto max-w-md p-6">
  <div class="flex items-center space-x-3">
    <div class="relative shrink-0">
      <input
        name="agree"
        type="checkbox"
        id="agree"
        class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
      />
      <!-- Heroicons name: mini/check -->
      <svg
        xmlns="http://www.w3.org/2000/svg"
        viewBox="0 0 16 16"
        fill="currentColor"
        class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
      >
        <path
          fill-rule="evenodd"
          d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
          clip-rule="evenodd"
        />
      </svg>
    </div>
    <label for="agree" class="select-none text-sm text-gray-900">I agree to the terms and conditions</label>
  </div>
</div>

<div class="mx-auto max-w-md p-6">
  <fieldset>
    <legend class="mb-5 font-medium text-gray-900">Select your preferences</legend>
    <div class="space-y-4">
      <div class="flex items-center space-x-3">
        <div class="relative shrink-0">
          <input
            type="checkbox"
            id="checkbox-1"
            class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
          />
          <!-- Heroicons name: mini/check -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <label for="checkbox-1" class="select-none text-sm text-gray-900">I prefer to receive communication by email</label>
      </div>

      <div class="flex items-center space-x-3">
        <div class="relative shrink-0">
          <input
            type="checkbox"
            id="checkbox-2"
            class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
          />
          <!-- Heroicons name: mini/check -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <label for="checkbox-2" class="select-none text-sm text-gray-900"
          >I would like to receive newsletters and updates about new products and services</label
        >
      </div>

      <div class="flex items-center space-x-3">
        <div class="relative shrink-0">
          <input
            type="checkbox"
            id="checkbox-3"
            class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
          />
          <!-- Heroicons name: mini/check -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <label for="checkbox-3" class="select-none text-sm text-gray-900">I am interested in participating in surveys and research studies</label>
      </div>

      <div class="flex items-center space-x-3">
        <div class="relative shrink-0">
          <input
            type="checkbox"
            id="checkbox-4"
            class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
          />
          <!-- Heroicons name: mini/check -->
          <svg
            xmlns="http://www.w3.org/2000/svg"
            viewBox="0 0 16 16"
            fill="currentColor"
            class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
          >
            <path
              fill-rule="evenodd"
              d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
              clip-rule="evenodd"
            />
          </svg>
        </div>
        <label for="checkbox-4" class="select-none text-sm text-gray-900"
          >I would like to receive personalized recommendations based on my browsing history</label
        >
      </div>
    </div>
  </fieldset>
</div>

<div class="mx-auto max-w-3xl p-6">
  <fieldset>
    <div class="-space-y-px">
      <div>
        <label class="border-1 relative z-10 flex cursor-pointer items-center space-x-4 rounded-t-lg border border-gray-300 bg-gray-50 px-6 py-4">
          <div class="relative shrink-0">
            <input
              type="checkbox"
              checked
              class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
            />
            <!-- Heroicons name: mini/check -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
            >
              <path
                fill-rule="evenodd"
                d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div class="relative inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-50 ring-1 ring-gray-200">
            <img class="block h-full w-full object-cover" src="https://composedui.com/img/avatar-1.jpeg" alt="Avatar" width="48" height="48" />
          </div>
          <div>
            <h4 class="font-medium text-gray-600">John Smith</h4>
            <p class="text-sm text-gray-600">Marketing Coordinator</p>
          </div>
        </label>
      </div>
      <div>
        <label class="border-1 relative flex cursor-pointer items-center space-x-4 border border-gray-200 bg-white px-6 py-4">
          <div class="relative shrink-0">
            <input
              type="checkbox"
              class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
            />
            <!-- Heroicons name: mini/check -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
            >
              <path
                fill-rule="evenodd"
                d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div class="relative inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-50 ring-1 ring-gray-200">
            <img class="block h-full w-full object-cover" src="https://composedui.com/img/avatar-2.jpeg" alt="Avatar" width="48" height="48" />
          </div>
          <div>
            <h4 class="font-medium text-gray-600">David Lee</h4>
            <p class="text-sm text-gray-600">Manager</p>
          </div>
        </label>
      </div>
      <div>
        <label class="border-1 relative flex cursor-pointer items-center space-x-4 border border-gray-200 bg-white px-6 py-4">
          <div class="relative shrink-0">
            <input
              type="checkbox"
              class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
            />
            <!-- Heroicons name: mini/check -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
            >
              <path
                fill-rule="evenodd"
                d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div class="relative inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-50 ring-1 ring-gray-200">
            <img class="block h-full w-full object-cover" src="https://composedui.com/img/avatar-3.jpeg" alt="Avatar" width="48" height="48" />
          </div>
          <div>
            <h4 class="font-medium text-gray-600">Michael Brown</h4>
            <p class="text-sm text-gray-600">Software Developer</p>
          </div>
        </label>
      </div>
      <div>
        <label class="border-1 relative flex cursor-pointer items-center space-x-4 rounded-b-lg border border-gray-200 bg-white px-6 py-4">
          <div class="relative shrink-0">
            <input
              type="checkbox"
              class="peer block size-5 appearance-none rounded-md border border-gray-300 checked:border-gray-500 checked:bg-gray-500 focus:outline-0 focus:ring-2 focus:ring-gray-400 focus:ring-offset-2"
            />
            <!-- Heroicons name: mini/check -->
            <svg
              xmlns="http://www.w3.org/2000/svg"
              viewBox="0 0 16 16"
              fill="currentColor"
              class="pointer-events-none absolute left-1/2 top-1/2 hidden size-4 -translate-x-1/2 -translate-y-1/2 text-white peer-checked:block"
            >
              <path
                fill-rule="evenodd"
                d="M12.416 3.376a.75.75 0 0 1 .208 1.04l-5 7.5a.75.75 0 0 1-1.154.114l-3-3a.75.75 0 0 1 1.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 0 1 1.04-.207Z"
                clip-rule="evenodd"
              />
            </svg>
          </div>
          <div class="relative inline-block h-12 w-12 shrink-0 overflow-hidden rounded-full bg-gray-50 ring-1 ring-gray-200">
            <img class="block h-full w-full object-cover" src="https://composedui.com/img/avatar-4.jpeg" alt="Avatar" width="48" height="48" />
          </div>
          <div>
            <h4 class="font-medium text-gray-600">James Rodriguez</h4>
            <p class="text-sm text-gray-600">Human Resources</p>
          </div>
        </label>
      </div>
    </div>
  </fieldset>
</div>