Checkbox

<!-- Default -->
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
  <input type="checkbox"
    class="peer w-24px h-24px rounded-4px appearance-none border disabled:bg-black-50 disabled:border-black-100 transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800"
    name="checkbox" />
  <svg width="16"
    height="12"
    viewBox="0 0 16 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute left-[4px] hidden fill-white peer-checked:flex">
    <path
      d="M6.14756 8.14806C5.95213 8.34437 5.63434 8.34437 5.4389 8.14806L2.61431 5.31096C2.13224 4.82675 1.34838 4.82675 0.866308 5.31096C0.387241 5.79215 0.387241 6.57006 0.866307 7.05125L5.08456 11.2882C5.47544 11.6808 6.11102 11.6808 6.5019 11.2882L15.1337 2.61816C15.6128 2.13697 15.6128 1.35906 15.1337 0.877871C14.6516 0.393665 13.8678 0.393665 13.3857 0.877872L6.14756 8.14806Z"/>
  </svg>
  <span class="peer-disabled:text-black-500">Text</span>
</label>
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
  <input type="checkbox"
    class="peer w-24px h-24px rounded-4px appearance-none border disabled:bg-black-50 disabled:border-black-100 transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800"
    name="checkbox-1"
    disabled />
  <svg width="16"
    height="12"
    viewBox="0 0 16 12"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute left-[4px] hidden fill-white peer-checked:flex">
    <path
      d="M6.14756 8.14806C5.95213 8.34437 5.63434 8.34437 5.4389 8.14806L2.61431 5.31096C2.13224 4.82675 1.34838 4.82675 0.866308 5.31096C0.387241 5.79215 0.387241 6.57006 0.866307 7.05125L5.08456 11.2882C5.47544 11.6808 6.11102 11.6808 6.5019 11.2882L15.1337 2.61816C15.6128 2.13697 15.6128 1.35906 15.1337 0.877871C14.6516 0.393665 13.8678 0.393665 13.3857 0.877872L6.14756 8.14806Z"/>
  </svg>
  <span class="peer-disabled:text-black-500">Text</span>
</label>

<!-- Small -->
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
  <input type="checkbox"
    class="peer w-16px h-16px rounded-4px appearance-none border disabled:bg-black-50 disabled:border-black-100 transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800"
    name="checkbox-2" />
  <svg width="10"
    height="8"
    viewBox="0 0 10 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute left-[3px] hidden fill-white peer-checked:flex">
    <path
      d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z"/>
  </svg>
  <span class="peer-disabled:text-black-500">Text</span>
</label>
<label class="flex gap-8px text-p2 items-center cursor-pointer relative has-disabled:cursor-no-drop ">
  <input type="checkbox"
    class="peer w-16px h-16px rounded-4px appearance-none border disabled:bg-black-50 disabled:border-black-100 transition-all cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800"
    name="checkbox-3"
    disabled />
  <svg width="10"
    height="8"
    viewBox="0 0 10 8"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
    class="absolute left-[3px] hidden fill-white peer-checked:flex">
    <path
      d="M3.84217 5.34246C3.72002 5.46514 3.5214 5.46514 3.39926 5.34246L1.63392 3.5693C1.33263 3.26667 0.842723 3.26667 0.541434 3.5693C0.242022 3.87003 0.242022 4.35622 0.541433 4.65696L3.1778 7.305C3.42209 7.55038 3.81933 7.55038 4.06362 7.30501L9.4584 1.88633C9.75781 1.58559 9.75781 1.0994 9.4584 0.79866C9.15711 0.496037 8.66721 0.496037 8.36592 0.798661L3.84217 5.34246Z"/>
  </svg>
  <span class="peer-disabled:text-black-500">Text</span>
</label>