Stack Exchange
Alpine.js issue with x-model on radio button
I have an issue with Alpine.js. I have 2 HTML blocks with the same x-model
<div class="filter-check">
<input x-model="resource_sector" id="sector-a6296300400e50" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a6296300400e50">Sector A</label>
<input x-model="resource_sector" id="sector-b6296300400e54" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b6296300400e54">Sector B</label>
<input x-model="resource_sector" id="sector-c6296300400e55" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c6296300400e55">Sector C</label>        
</div>

<div class="filter-check">
<input x-model="resource_sector" id="sector-a62963288132b7" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a62963288132b7">Sector A</label>
<input x-model="resource_sector" id="sector-b62963288132b9" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b62963288132b9">Sector B</label>
<input x-model="resource_sector" id="sector-c62963288132ba" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c62963288132ba">Sector C</label>        
</div>

It works without a problem when only 1 of them is used on the page. But when I place the both of them, the first one start working with an issue: to check radio input, you need to double click it. But the model updated after the first click. Please check short GIF.
Thanks,
Artem


You have to place them into different <form> tags, so they can act independently and Alpine.js will sync data between them.


<script src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>

<div x-data="{resource_sector: ''}">
  <form>
    <div class="filter-check">
        <input x-model="resource_sector" id="sector-a6296300400e50" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a6296300400e50">Sector A</label>
        <input x-model="resource_sector" id="sector-b6296300400e54" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b6296300400e54">Sector B</label>
        <input x-model="resource_sector" id="sector-c6296300400e55" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c6296300400e55">Sector C</label>        
    </div>
  </form>

  <form>
    <div class="filter-check">
        <input x-model="resource_sector" id="sector-a62963288132b7" value="sector-a" type="radio" name="resource_sector"> <label for="sector-a62963288132b7">Sector A</label>
        <input x-model="resource_sector" id="sector-b62963288132b9" value="sector-b" type="radio" name="resource_sector"> <label for="sector-b62963288132b9">Sector B</label>
        <input x-model="resource_sector" id="sector-c62963288132ba" value="sector-c" type="radio" name="resource_sector"> <label for="sector-c62963288132ba">Sector C</label>        
    </div>
  </form>
</div>




I was also facing same issue. This is interesting. I couldn't find anywhere in doc where this was stated that we have to have the need for the form element to bind them together, but with form it is working expected.
