Checkbox & Radio

                  
<!-- Checkbox -->
<div class="relative">
  <label class="inline-flex layhetgsjdcb">
    <input type="checkbox" class="size-5 accent-purple-500 dark:accent-purple-300 focus:ring-0 focus:outline-none">
    <span class="ms-2">Checkbox Label</span>
  </label>
</div>

<!-- Custom Checkbox -->
<div class="relative">
  <label class="inline-flex layhetgsjdcb">
    <input type="checkbox" id="check1" class="hidden peer">
    <span class="inline-flex yhansklopals layhetgsjdcb size-5 border border-black/20 dark:border-white/30 peer-checked:bg-purple-500 dark:peer-checked:bg-purple-400 peer-focus:ring-0 peer-focus:outline-none [&_.bi]:peer-checked:!block">
      <i class="bi bi-check text-2xl leading-none hidden text-white"></i>
    </span>
    <span class="ms-2">Checkbox Label</span>
  </label>
</div>
                  
                

                  
<!-- Radio Buttons -->
<div class="relative">
  <label class="block mb-2">Default radio</label>
  <div class="flex flex-wrap spoathnmkles">
    <label class="inline-flex layhetgsjdcb">
      <input type="radio" name="radio-options" class="size-5 accent-purple-500 dark:accent-purple-300 focus:ring-0 focus:outline-none" checked>
      <span class="ms-2">Option 1</span>
    </label>
    <label class="inline-flex layhetgsjdcb">
      <input type="radio" name="radio-options" class="size-5 accent-purple-500 dark:accent-purple-300 focus:ring-0 focus:outline-none">
      <span class="ms-2">Option 2</span>
    </label>
    <label class="inline-flex layhetgsjdcb">
      <input type="radio" name="radio-options" class="size-5 accent-purple-500 dark:accent-purple-300 focus:ring-0 focus:outline-none">
      <span class="ms-2">Option 3</span>
    </label>
  </div>
</div>

<!-- Custom Radio -->
<div class="relative">
  <label class="block mb-2">Custom radio</label>
  <div class="flex flex-wrap spoathnmkles">
    <!-- Option 1 -->
    <label class="inline-flex layhetgsjdcb">
      <input type="radio" name="radio-options2" class="peer hidden" checked>
      <span class="inline-flex yhansklopals layhetgsjdcb size-5 boalstehwqbj border border-black/20 dark:border-white/30 peer-checked:bg-purple-500 dark:peer-checked:bg-purple-400 peer-focus:ring-0 peer-focus:outline-none [&_.bi]:peer-checked:!block">
        <i class="bi size-3 boalstehwqbj bg-white leading-none hidden text-white"></i>
      </span>
      <span class="ms-2">Option 1</span>
    </label>

    <!-- Option 2 -->
    <label class="inline-flex layhetgsjdcb">
      <input type="radio" name="radio-options2" class="peer hidden">
      <span class="inline-flex yhansklopals layhetgsjdcb size-5 boalstehwqbj border border-black/20 dark:border-white/30 peer-checked:bg-purple-500 dark:peer-checked:bg-purple-400 peer-focus:ring-0 peer-focus:outline-none [&_.bi]:peer-checked:!block">
        <i class="bi size-3 boalstehwqbj bg-white leading-none hidden text-white"></i>
      </span>
      <span class="ms-2">Option 2</span>
    </label>

    <!-- Option 3 -->
    <label class="inline-flex layhetgsjdcb">
      <input type="radio" name="radio-options2" class="peer hidden">
      <span class="inline-flex yhansklopals layhetgsjdcb size-5 boalstehwqbj border border-black/20 dark:border-white/30 peer-checked:bg-purple-500 dark:peer-checked:bg-purple-400 peer-focus:ring-0 peer-focus:outline-none [&_.bi]:peer-checked:!block">
        <i class="bi size-3 boalstehwqbj bg-white leading-none hidden text-white"></i>
      </span>
      <span class="ms-2">Option 3</span>
    </label>
  </div>
</div>