Radio input - keep's switching around?

#1

Hey guys,

I’m trying something super simple - to have a radio input which the user can select. For some reason, as soon as I click one, a different one gets selected, I click another and the same thing happens.

Screenshot 2020-06-09 at 6.04.20 pm

(The above should have selected Dog)

I’m sure I’m doing something really simply wrong, here’s my blade:

<div>
    Cats
    <input wire:model="onlyCats" id="onlyCats" name="animal" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
</div>
    Dogs
<div>
    <input wire:model="onlyDogs" id="onlyDogs" name="animal" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out" />
</div>
<div>
    Both
    <input wire:model="both" id="both" name="animal" type="radio" class="form-radio h-4 w-4 text-indigo-600 transition duration-150 ease-in-out">
</div>

And my controller they are defined as:

public $onlyCats;
public $onlyDogs;
public $both;

How should I be using Radios?

#2

Typically with radio buttons (this is HTML stuff, not livewire), you should have the name be the same. This allows for selective toggling meaning only one value will be present at any given time. This will simplify things for you on the backend as well.

Controller.php

public $animal;

controller.blade.php

<input wire:model="animal" name="animal" type="radio" value="cats" /> Cats
<input wire:model="animal" name="animal" type="radio" value="dogs" /> Dogs
<input wire:model="animal" name="animal" type="radio" value="both" /> Both

So on the backend, you would just run your logic off $animal to determine if you have dogs, cats, or both. You can even add {{ $animal }} on your template to see the value change.

7 Likes