I'm making a website and learning AlpineJS. I'm trying to make a custom 'checkbox' (from tailwindcss) to make people agree to the Terms of Service.

<div class="flex-shrink-0">
  <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
  <button x-show="!isOpen" @click="isOpen = !isOpen" type="button" role="switch" aria-checked="false">
  <span class="sr-only">Agree to policies</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true"></span>
  </button>
  <button x-show="isOpen" @click="isOpen = !isOpen" type="button" role="switch" aria-checked="false">
  <span class="sr-only">Agree to policies</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true"></span>
  </button>
</div>

Now there's probably already a better way to do this custom checkbox because now I'm replacing the entire checkbox when you click it. So if you have tips for that, please let me know!

With flask I need to get the value of this checkbox. But since it's not a real checkbox, I can't just get the data through the POST request. So I figured I could use a hidden to parse the data with the POST request.

<input type="hidden" name="terms" value="">

I want the value in the to be either 'true' or 'false' so I can do things with that in my code. I can't seem to find a good solution anywhere online but I'm sure the is one. Does anybody have any ideas?

I'm making a website and learning AlpineJS. I'm trying to make a custom 'checkbox' (from tailwindcss) to make people agree to the Terms of Service.

<div class="flex-shrink-0">
  <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
  <button x-show="!isOpen" @click="isOpen = !isOpen" type="button" role="switch" aria-checked="false">
  <span class="sr-only">Agree to policies</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true"></span>
  </button>
  <button x-show="isOpen" @click="isOpen = !isOpen" type="button" role="switch" aria-checked="false">
  <span class="sr-only">Agree to policies</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true"></span>
  </button>
</div>

Now there's probably already a better way to do this custom checkbox because now I'm replacing the entire checkbox when you click it. So if you have tips for that, please let me know!

With flask I need to get the value of this checkbox. But since it's not a real checkbox, I can't just get the data through the POST request. So I figured I could use a hidden to parse the data with the POST request.

<input type="hidden" name="terms" value="">

I want the value in the to be either 'true' or 'false' so I can do things with that in my code. I can't seem to find a good solution anywhere online but I'm sure the is one. Does anybody have any ideas?

• javascript
• html
• flask
• alpine.js

1 Answer 1

Alpine.js uses the x-model directive to bind variables to input elements. Just put this hidden input element anywhere in your form where isOpen variable is present:

<input type="hidden" name="terms" x-model="isOpen" />