The issue you're experiencing with the radio button not updating on the fly is likely due to the way the wire:model is handling the boolean values. In HTML, the value attribute of a radio button is always a string, so when you set :value="true" or :value="false", they are being interpreted as strings, not booleans.
To fix this, you should ensure that the values are correctly interpreted as booleans in your Livewire component. Here's how you can adjust your code:
-
Use string values for the radio buttons and convert them to booleans in your Livewire component.
-
Ensure that your Livewire component is correctly handling the conversion.
Here's an example of how you can adjust your code:
{{-- Discapacidad --}}
<div>
<x-input-label :value="__('welcome.Disability')" class="pb-3" />
<div class="flex flex-row gap-3">
<div class="flex flex-row gap-3">
<x-input-label for="disability" :value="__('welcome.Yes')" />
<input type="radio" value="1" wire:model="disability" />
</div>
<div class="flex flex-row gap-3">
<x-input-label for="disability" :value="__('welcome.No')" />
<input type="radio" value="0" wire:model="disability" />
</div>
</div>
</div>
{{ 'Discapacidad: ' . $disability }}
@if ($disability)
{{-- Tipo de discapacidad --}}
<div>
<x-input-label for="disability_type" :value="__('welcome.Disability type')" />
<x-text-input id="disability_type" wire:model="disability_type" class="block mt-1 w-full"
type="text" required autofocus />
</div>
@endif
In your Livewire component, ensure that you are converting the disability value to a boolean:
public $disability = false;
public function updatedDisability($value)
{
$this->disability = filter_var($value, FILTER_VALIDATE_BOOLEAN);
}
This way, when the radio button is selected, the value will be correctly interpreted as a boolean, and the input field will appear as expected.