Nosean's avatar

Laravel livewire form radio

Hey Guy's

ii'm studying laravel livewire and am faced with a tiny problem. checked does not work on my radio but why?

    <div class="form-row">
        <div class="form-group col-md-1 pl-4">
            <input type="radio" checked wire:model="form.isCompany" name="isCompany" id="iscompany_yes" class="form-check-input" value="yes">
            <label for="iscompany_yes">{{ __('words.yes') }}</label>
        </div>
        <div class="form-group col-md-1 pl-4">
            <input type="radio" wire:model="form.isCompany" name="isCompany" id="iscompany_no" class="form-check-input" value="no">
            <label for="iscompany_no">{{ __('words.no') }}</label>
        </div>
    </div>
    @if(($form['isCompany'] == 'yes'))
        <div class="form-row">
            <div class="form-group col-md-12">
                <label for="company_name">{{ __('words.company_name') }}</label>
                <input type="text" wire:model="form.company" id="company_name" class="form-control form-control-sm">
            </div>
        </div>
    @endif
0 likes
8 replies
Nakov's avatar

@nosean and in your component, is the default value for $form['isCompany'] = 'yes';?

Otherwise that state will change when you switch between the radio buttons, the default checked from HTML won't initialize your component with the value.

Snapey's avatar

I think it ignores the value. Livewire returns "on" or ""

Echo the radio to the screen with {{ $form['isCompany'] }} then toggle it a few times.

Edit: sorry, forget that, I was confused with checkboxes.

remove checked, do the echo as suggested so that you can observe the value change. If you want a default, set it in the component

1 like
eugenefvdm's avatar

The advice of {{ $form['isCompany'] }} is spot on and crucial in troubleshooting and understand Livewire radio button issues.

I came back to this post after struggling for days to get this perfect on the Laravel Livewire Jetstream Profile update screen. In my scenario I had both a dropdown select, and a checkbox. Both needed conditional show and hide functionality.

After hours of struggling I can tell you the rules are:

  1. Don't use checked on radio buttons as Livewire will take care of everything.

  2. Be sure to bind all your radio buttons to the same model.

  3. If you're usings booleans in your database, native storage are 0s and 1s. Make sure value="0" and value="1" otherwise Livewire won't set them properly when loading.

  4. When updating your database, do this: 'has_partner' => $input['has_partner'] == '1' ? true : false,

  5. Change events on both select and checkboxes would need to refresh the page. In my case I just call an empty refresh() method on the component but I'm sure there is a better way.

Here are the fruits of my labour:

https://imgur.com/a/OeEPpUj

In the screenshot, normally the Other Agency and Partner fields are hidden until "Other" and "Partner" are clicked.

4 likes
m7vm7v's avatar

@Snapey that's a bit unfair mate. What in the future someone else needs a solution. I think it is better that is late in the party but at least it is answered rather than left aside.

1 like
Narton's avatar

i know its old, but tried 'checked=checked' ?

Please or to participate in this conversation.