checkboxes

              <div class="flex items-center gap-2" x-data="{ checked: false }">
  <input
    id="basic-checkbox"
    name="basic-checkbox"
    type="checkbox"
    x-model="checked"
    class="rounded shadow size-4 border-zinc-300 text-blue-600 focus:ring-blue-600"
  />
  <label class="text-base block text-sm text-zinc-500">
    Basic checkbox (<span x-text="checked ? 'Checked' : 'Unchecked'"></span>)
  </label>
</div>