Checkbox & Radio

                  
<!-- Checkbox -->
<div class="relative">
  <label class="inline-flex olwuyhsbcnmdj">
    <input type="checkbox" class="size-5 accent-primary-300 bg-primary-950 border border-primary-600 focus:ring-0 focus:border-primary-300 focus:outline-none">
    <span class="ms-2">Checkbox Label</span>
  </label>
</div>

<!-- Custom Checkbox with Bootstrap Icon -->
<div class="relative">
  <label class="inline-flex olwuyhsbcnmdj">
    <input type="checkbox" id="check1" class="hidden peer">
    <span class="inline-flex qaksleiuryhnv olwuyhsbcnmdj size-5 border border-primary-600 bg-primary-950 peer-checked:bg-primary-300 peer-focus:ring-0 peer-focus:outline-none">
      <i class="bi bi-check text-2xl leading-none text-primary-950"></i>
    </span>
    <span class="ms-2">Checkbox Label</span>
  </label>
</div>
                  
                

                  
<!-- Radio -->
<div class="relative">
  <label class="block mb-2 text-primary-300">Default radio</label>
  <div class="flex flex-wrap ghsnkalieksml">
    <label class="inline-flex olwuyhsbcnmdj">
      <input type="radio" name="radio-options" class="size-5 accent-primary-300 bg-primary-950 border border-primary-600 focus:ring-0 focus:border-primary-300 focus:outline-none" checked>
      <span class="ms-2">Option 1</span>
    </label>
    <label class="inline-flex olwuyhsbcnmdj">
      <input type="radio" name="radio-options" class="size-5 accent-primary-300 bg-primary-950 border border-primary-600 focus:ring-0 focus:border-primary-300 focus:outline-none">
      <span class="ms-2">Option 2</span>
    </label>
    <label class="inline-flex olwuyhsbcnmdj">
      <input type="radio" name="radio-options" class="size-5 accent-primary-300 bg-primary-950 border border-primary-600 focus:ring-0 focus:border-primary-300 focus:outline-none">
      <span class="ms-2">Option 3</span>
    </label>
  </div>
</div>

<!-- Custom Radio -->
<div class="relative">
  <label class="block mb-2 text-primary-300">Custom radio</label>
  <div class="flex flex-wrap ghsnkalieksml">
    <!-- Option 1 -->
    <label class="inline-flex olwuyhsbcnmdj">
      <input type="radio" name="radio-options2" class="peer hidden" checked>
      <span class="inline-flex qaksleiuryhnv olwuyhsbcnmdj w-5 h-5 rounded-full border border-primary-600 bg-primary-950 peer-checked:bg-primary-300 peer-focus:ring-0 peer-focus:outline-none">
        <i class="bi bi-record-circle-fill leading-none mt-[1px] text-primary-950"></i>
      </span>
      <span class="ms-2">Option 1</span>
    </label>

    <!-- Option 2 -->
    <label class="inline-flex olwuyhsbcnmdj">
      <input type="radio" name="radio-options2" class="peer hidden">
      <span class="inline-flex qaksleiuryhnv olwuyhsbcnmdj w-5 h-5 rounded-full border border-primary-600 bg-primary-950 peer-checked:bg-primary-300 peer-focus:ring-0 peer-focus:outline-none">
        <i class="bi bi-record-circle-fill leading-none mt-[1px] text-primary-950"></i>
      </span>
      <span class="ms-2">Option 2</span>
    </label>

    <!-- Option 3 -->
    <label class="inline-flex olwuyhsbcnmdj">
      <input type="radio" name="radio-options2" class="peer hidden">
      <span class="inline-flex qaksleiuryhnv olwuyhsbcnmdj w-5 h-5 rounded-full border border-primary-600 bg-primary-950 peer-checked:bg-primary-300 peer-focus:ring-0 peer-focus:outline-none">
        <i class="bi bi-record-circle-fill leading-none mt-[1px] text-primary-950"></i>
      </span>
      <span class="ms-2">Option 3</span>
    </label>
  </div>
</div>
                  
                

                  
<!-- switch -->
<label class="relative w-12 h-[26px]">
  <input id="switch5" type="checkbox" class="switch-checkbox relative inline-block w-12 h-[26px] transition-all duration-200 ease-in-out cursor-pointer appearance-none rounded-full border border-primary-600 bg-primary-900" checked>
  <div class="toggle-default absolute top-[3px] start-1 w-5 h-5 transition-all duration-200 ease-in-out transform bg-black rounded-full shadow-md"></div>
</label>

<!-- switch 2 -->
<label class="relative w-12 h-[26px]">
  <input id="switch6" type="checkbox" class="switch-checkbox relative inline-block w-11 h-[22px] transition-all duration-200 ease-in-out cursor-pointer appearance-none border border-primary-600 bg-primary-900" checked>
  <div class="toggle-default absolute top-[3px] start-1 size-4 transition-all duration-200 ease-in-out transform bg-black shadow-md"></div>
</label>