Checkbox

<!-- Default -->
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
  <input
    type="checkbox"
    name="checkbox"
    class="peer w-24px h-24px rounded-4px appearance-none border transition-all disabled:bg-black-50 disabled:border-black-100 cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800">
  </input>
  <svg
    width="15"
    height="12"
    viewbox="0 0 15 12"
    fill="none"
    class="absolute left-[4px] hidden fill-white peer-checked:flex">
    <path d="M5.64054 7.63341C5.44511 7.82972 5.12732 7.82972 4.93188 7.63341L2.10729 4.79631C1.62522 4.3121 0.841359 4.31211 0.359289 4.79631C-0.119778 5.2775 -0.119778 6.05541 0.359288 6.5366L4.57754 10.7735C4.96842 11.1662 5.604 11.1662 5.99488 10.7735L14.6267 2.10352C15.1057 1.62233 15.1057 0.844411 14.6267 0.363222C14.1446 -0.120984 13.3607 -0.120983 12.8787 0.363223L5.64054 7.63341Z">
    </path>
  </svg>
  <span class="peer-disabled:text-black-500">
    Text
  </span>
</label>
<!-- Small -->
<label class="flex gap-8px text-p2 items-center relative has-disabled:cursor-no-drop cursor-pointer">
  <input
    type="checkbox"
    name="checkbox-2"
    class="peer w-16px h-16px rounded-4px appearance-none border transition-all disabled:bg-black-50 disabled:border-black-100 cursor-pointer bg-white border-black-300 hover:border-black active:border-black checked:border-black checked:bg-black checked:hover:bg-black-800">
  </input>
  <svg
    width="10"
    height="8"
    viewbox="0 0 10 8"
    fill="none"
    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">
    </path>
  </svg>
  <span class="peer-disabled:text-black-500">
    Text
  </span>
</label>