<div class="checkboxes-container flex flex-col items-start gap-4 lg:gap-6">
  <label for="checkbox22" class="option">
    <input type="checkbox" id="checkbox22" aria-checked="true" checked />
    <span class="checkbox default"></span>
    Default
  </label>
  <label for="checkbox23" class="option">
    <input type="checkbox" id="checkbox23" aria-checked="true" checked />
    <span class="checkbox primary"></span>
    Primary
  </label>
  <label for="checkbox24" class="option">
    <input type="checkbox" id="checkbox24" aria-checked="true" checked />
    <span class="checkbox secondary"></span>
    Secondary
  </label>
  <label for="checkbox25" class="option">
    <input type="checkbox" id="checkbox25" aria-checked="true" checked />
    <span class="checkbox info"></span>
    Info
  </label>
  <label for="checkbox26" class="option">
    <input type="checkbox" id="checkbox26" aria-checked="true" checked />
    <span class="checkbox success"></span>
    Success
  </label>
  <label for="checkbox27" class="option">
    <input type="checkbox" id="checkbox27" aria-checked="true" checked />
    <span class="checkbox warning"></span>
    Warning
  </label>
  <label for="checkbox28" class="option">
    <input type="checkbox" id="checkbox28" aria-checked="true" checked />
    <span class="checkbox error"></span>
    Error
  </label>
  <label for="checkbox29" class="option !cursor-default text-neutral-50">
    <input type="checkbox" id="checkbox29" aria-checked="true" disabled checked />
    <span class="checkbox disabled"></span>
    Disabled
  </label>
</div>
                  

<div class="flex flex-wrap gap-4 lg:gap-6">
  <div class="checkboxes-container flex gap-4 lg:gap-6">
    <label for="checkbox6" class="option flex flex-col gap-2">
      Top
      <input type="checkbox" id="checkbox6" name="checkbox6" aria-checked="false" />
      <span class="checkbox"></span>
    </label>
    <label for="checkbox7" class="option">
      Start
      <input type="checkbox" id="checkbox7" name="checkbox7" aria-checked="false" />
      <span class="checkbox"></span>
    </label>
    <label for="checkbox8" class="option flex flex-col">
      <input type="checkbox" id="checkbox8" name="checkbox8" aria-checked="false" />
      <span class="checkbox"></span>
      Bottom
    </label>
    <label for="checkbox9" class="option">
      <input type="checkbox" id="checkbox9" name="checkbox9" aria-checked="false" />
      <span class="checkbox"></span>
      Right
    </label>
  </div>
</div>
                  

<div class="flex flex-col gap-4 lg:gap-6">
  <div class="flex gap-4 flex-wrap lg:gap-6">
    <div class="flex items-center gap-2">
      <input type="checkbox" class="peer/check hidden" id="checkbox19" />
      <i class="lar la-heart text-2xl peer-checked/check:text-error-300"></i>
      <label for="checkbox19" class="cursor-pointer select-none text-xl">Custom Icon</label>
    </div>
    <div class="flex items-center gap-2">
      <input type="checkbox" class="peer/check hidden" id="checkbox20" />
      <i class="las la-clock text-xl peer-checked/check:text-error-300"></i>
      <label for="checkbox20" class="cursor-pointer select-none">Custom Icon</label>
    </div>
    <div class="flex items-center gap-2">
      <input type="checkbox" class="peer/check hidden" id="checkbox21" />
      <i class="las la-cog peer-checked/check:text-error-300"></i>
      <label for="checkbox21" class="cursor-pointer select-none text-xs">Custom Icon</label>
    </div>
  </div>
</div>