Alpine.js x-bound: Binding group inputs

by rameel

HTML

<div x-data="{ pets: ['goldfish', 'parrot'], contact: 'Email' }">
  <!-- grouped checkboxes are similar to "select multiple"
       and use an array for selected options -->
  <label><input &group="pets" type="checkbox" value="cat" /> Cat</label>
  <label><input &group="pets" type="checkbox" value="goldfish" /> Goldfish</label>
  <label><input &group="pets" type="checkbox" value="parrot" /> Parrot</label>
  <label><input &group="pets" type="checkbox" value="spider" /> Spider</label>

  <br>
  <!-- grouped radio inputs are mutually exclusive -->
  <label><input &group="contact" type="radio" value="Email" /> Email</label>
  <label><input &group="contact" type="radio" value="Phone" /> Phone</label>
  <label><input &group="contact" type="radio" value="Mail" /> Mail</label>

  <hr>
  <select &value="pets" multiple>
    <option value="cat">Cat</option>
    <option value="goldfish">Goldfish</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
  </select>

  <br>
  <select &value="contact">
    <option>Email</option>
    <option>Phone</option>
    <option>Mail</option>
  </select>

  <pre x-format>{{ JSON.stringify({ pets, contact }, null, 2)}}</pre>
</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-format@1/alpinegear-format.min.js" defer></script>
<script src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js" defer></script>

CSS

[x-data] {
  display: flex;
  flex-direction: column;
  gap: 4px;
}