Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

MauricioGlez's avatar

Noob, why my radio button is not updating?

I want a input to appear when a radio button value is true, but when using the wire:model="disability", the value is not updated on the fly, but it is when submited.

{{-- 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="true" wire:model="disability" />
                        </div>
                        <div class="flex flex-row gap-3">
                            <x-input-label for="disability" :value="__('welcome.No')" />
                            <input type="radio" :value="false" 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
0 likes
2 replies
LaryAI's avatar
Level 58

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:

  1. Use string values for the radio buttons and convert them to booleans in your Livewire component.

  2. 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.

MauricioGlez's avatar

So I just added .change on the wire:model to monitor it, but is this the normal behavior? Please let me know if I'm doing something wrong.

Please or to participate in this conversation.