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 cursor-pointer bg-white border-accent-300 hover:border-accent-500 active:border-accent-500 checked:border-accent-900 checked:bg-accent-900 checked:hover:bg-accent-700 disabled:bg-gray-50 disabled:border-gray-100 dark:bg-black dark:disabled:bg-black-800 dark:disabled:bg-gray-800 dark:disabled:border-gray-700">
  </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 cursor-pointer bg-white border-accent-300 hover:border-accent-500 active:border-accent-500 checked:border-accent-900 checked:bg-accent-900 checked:hover:bg-accent-700 disabled:bg-gray-50 disabled:border-gray-100 dark:bg-black dark:disabled:bg-black-800 dark:disabled:bg-gray-800 dark:disabled:border-gray-700">
  </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>