<label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>
              

                    
      <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-navy-400 dark:checked:border-navy-400"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:bg-navy-900 dark:border-navy-500 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm bg-slate-100 border-slate-400/70 checked:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Error</p>
  </label>
                  

                
      <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:checked:bg-navy-400"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:checked:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-full border-slate-400/70 checked:bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>
              

                
      <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>
              

                    
      <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:bg-navy-900 dark:border-navy-500 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:bg-navy-900 dark:border-navy-500 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:bg-navy-900 dark:border-navy-500 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-sm bg-slate-100 border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:bg-navy-900 dark:border-navy-500"
      type="checkbox"
    />
    <p>Error</p>
  </label>
                

                
      <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-slate-500 checked:border-slate-500 hover:border-slate-500 focus:border-slate-500 dark:border-navy-400 dark:before:bg-navy-200 dark:checked:border-navy-200 dark:hover:border-navy-200 dark:focus:border-navy-200"
      type="checkbox"
    />
    <p>Default</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>Primary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
      type="checkbox"
    />
    <p>Secondary</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
      type="checkbox"
    />
    <p>Info</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
      type="checkbox"
    />
    <p>Success</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-warning checked:!border-warning hover:!border-warning focus:!border-warning dark:border-navy-400"
      type="checkbox"
    />
    <p>Warning</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-error checked:!border-error hover:!border-error focus:!border-error dark:border-navy-400"
      type="checkbox"
    />
    <p>Error</p>
  </label>

              

                
      <label class="inline-flex items-center  space-x-2">
    <input
      disabled
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:opacity-60 disabled:border-slate-300 dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      type="checkbox"
    />
    <p>Unchecked</p>
  </label>

  <label class="inline-flex items-center  space-x-2">
    <input
      disabled
      checked
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary disabled:pointer-events-none disabled:opacity-60 disabled:border-slate-300 dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent dark:disabled:border-navy-450"
      type="checkbox"
    />
    <p>Checked</p>
  </label>

              

                
      <label class="inline-flex items-center  space-x-2">
    <input
      checked
      class="form-checkbox is-basic size-3 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>1</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-3.5 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>2</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-4 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>3</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>4</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-5 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>5</p>
  </label>
  <label class="inline-flex items-center  space-x-2">
    <input
      class="form-checkbox is-basic size-6 rounded-sm border-slate-400/70 checked:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:checked:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
      type="checkbox"
    />
    <p>6</p>
  </label>
              

                
      <div class="mt-5" x-data="{selectedFruits: ['apple']}">
    <div class="inline-space">
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruits"
          value="apple"
          class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-primary checked:border-primary hover:border-primary focus:border-primary dark:border-navy-400 dark:before:bg-accent dark:checked:border-accent dark:hover:border-accent dark:focus:border-accent"
          type="checkbox"
        />
        <p>Apple</p>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruits"
          value="pineapple"
          class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:bg-secondary checked:border-secondary hover:border-secondary focus:border-secondary dark:border-navy-400 dark:before:bg-secondary-light dark:checked:border-secondary-light dark:hover:border-secondary-light dark:focus:border-secondary-light"
          type="checkbox"
        />
        <p>PineApple</p>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruits"
          value="strawberry"
          class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-info checked:!border-info hover:!border-info focus:!border-info dark:border-navy-400"
          type="checkbox"
        />
        <p>Strawberry</p>
      </label>
      <label class="inline-flex items-center  space-x-2">
        <input
          x-model="selectedFruits"
          value="orange"
          class="form-checkbox is-outline size-5 rounded-full border-slate-400/70 before:!bg-success checked:!border-success hover:!border-success focus:!border-success dark:border-navy-400"
          type="checkbox"
        />
        <p>Orange</p>
      </label>
    </div>
    <p>Value: <span x-text="selectedFruits"></span></p>
  </div>