Input Checkbox Using Tailwind UI

The Input Checkbox component is a stylish and interactive user interface element designed using Tailwind CSS. This component allows users to make selections by clicking on checkboxes that can be customized to match the overall design of the application.
forms
Loading component...
index.html
133 lines
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
  href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap"
  rel="stylesheet">

<style>
  body {
    font-family: 'Plus Jakarta Sans', sans-serif;
  }

  /* Custom checkbox style */
  input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1em;
    height: 1em;
    background-color: white;
    border: 2px solid #4F46E5;
    border-radius: 4px;
    outline: none;
    cursor: pointer;
  }

  input[type="checkbox"]:checked {
    background-color: #4F46E5;
    border-color: #4F46E5;
  }


</style>

<h1 class="text-center font-bold pt-10 text-3xl mb-8">Input Checkbox component</h1>
<div class="w-full md:max-w-2xl lg:max-w-xl mx-auto bg-gray-200 p-4 md:p-8 rounded-xl space-y-4 flex flex-col mb-16">
  <!-- Card 1 -->
  <label for="checklist1" class="cursor-pointer ">
    <div id="card1"
      class="flex bg-white items-center space-x-4 border p-4 rounded-lg hover:border-indigo-600 hover:bg-indigo-50">
      <input type="checkbox" id="checklist1" class="">
      <img class="w-8 h-8 rounded-full object-cover"
        src="https://images.pexels.com/photos/7562139/pexels-photo-7562139.jpeg?auto=compress&cs=tinysrgb&w=600"
        alt="Avatar">
      <div>
        <p class="text-sm font-semibold">John Doe</p>
        <p class="text-xs text-gray-500">Manager</p>
      </div>
    </div>
  </label>

  <label for="checklist2" class="cursor-pointer">
    <div id="card2"
      class="flex bg-white items-center space-x-4 border p-4 rounded-lg hover:border-indigo-600 hover:bg-indigo-50">
      <input type="checkbox" id="checklist2" class="">
      <img class="w-8 h-8 rounded-full object-cover"
        src="https://images.unsplash.com/photo-1526413232644-8a40f03cc03b?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
        alt="Avatar">
      <div>
        <p class="text-sm font-semibold">Jane Smith</p>
        <p class="text-xs text-gray-500">Supervisor</p>
      </div>
    </div>
  </label>

  <label for="checklist3" class="cursor-pointer">
    <div id="card3"
      class="flex bg-white items-center space-x-4 border p-4 rounded-lg hover:border-indigo-600 hover:bg-indigo-50">
      <input type="checkbox" id="checklist3">
      <img class="w-8 h-8 rounded-full object-cover"
        src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
        alt="Avatar">
      <div>
        <p class="text-sm font-semibold">Mark Johnson</p>
        <p class="text-xs text-gray-500">Engineer</p>
      </div>
    </div>
  </label>

  <!-- Card 4 -->
  <label for="checklist4" class="cursor-pointer">
    <div id="card4"
      class="flex bg-white items-center space-x-4 border p-4 rounded-lg hover:border-indigo-600 hover:bg-indigo-50">
      <input type="checkbox" id="checklist4">
      <img class="w-8 h-8 rounded-full object-cover"
        src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=464&q=80"
        alt="Avatar">
      <div>
        <p class="text-sm font-semibold">Emily Brown</p>
        <p class="text-xs text-gray-500">Designer</p>
      </div>
    </div>
  </label>

  <!-- Card 5 -->
  <label for="checklist5" class="cursor-pointer">
    <div id="card5"
      class="flex bg-white items-center space-x-4 border p-4 rounded-lg hover:border-indigo-600 hover:bg-indigo-50">
      <input type="checkbox" id="checklist5">
      <img class="w-8 h-8 rounded-full object-cover"
        src="https://images.unsplash.com/photo-1624395213043-fa2e123b2656?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=387&q=80"
        alt="Avatar">
      <div>
        <p class="text-sm font-semibold">Michael Lee</p>
        <p class="text-xs text-gray-500">Developer</p>
      </div>
    </div>
  </label>

</div>

<script>
  // Function to handle click event for each card
  function handleCardClick(cardId, checkboxId) {
    const card = document.getElementById(cardId);
    const checkbox = document.getElementById(checkboxId);

    card.addEventListener('click', () => {
      checkbox.checked = !checkbox.checked;

      if (checkbox.checked) {
        card.classList.add('border-indigo-600');
      } else {
        card.classList.remove('border-indigo-600');
      }
    });
  }

  handleCardClick('card1', 'checklist1');
  handleCardClick('card2', 'checklist2');
  handleCardClick('card3', 'checklist3');
  handleCardClick('card4', 'checklist4');
  handleCardClick('card5', 'checklist5');
</script>
Input Checkbox Using Tailwind UI

Preview - Input Checkbox Using Tailwind UI
