Alpine.js x-bound: Binding indeterminate (basic example)

by rameel

HTML

<div x-data="{ checked: false, indeterminate: true }">
  <label>
    <input type="checkbox" &checked &indeterminate />

    <template x-match>
      <span x-case="indeterminate">Waiting...</span>
      <span x-case="checked">Checked</span>
      <span x-default>Unchecked</span>
    </template>
  <label>

  <pre x-text="JSON.stringify({ checked, indeterminate }, null, 2)"></pre>

  <button @click="indeterminate = true">Reset</button>
</div>

<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-bound@1/alpinegear-bound.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/@ramstack/alpinegear-match@1/alpinegear-match.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

CSS

html {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

input[type="checkbox"] {
  transform: scale(1.25);
  cursor: pointer;
}