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

gemini_man93's avatar

Laravel 11 + Livewire 3 Checkbox issue

So, I am learning Livewire. I made a small project (Todo) and plan to make it more advanced. The Todo title includes adding, updating, and deleting tasks, and I created my own custom data table. Now, I want to add a checkbox for reminders. If it is checked, a new field appears, allowing the user to select a date and time for the reminder. The issue is that when I edit a Todo with the reminder value set to true, the checkbox is not being checked. The backend logic is working because the datetime field appears when the reminder value is true. Here is my code:

           <div class="mt-3 transform transition-all"
               x-show="isReminder"
               x-transition:enter="ease-out duration-300"
               x-transition:enter-start="opacity-0 scale-90"
               x-transition:enter-end="opacity-100 scale-100"
               x-transition:leave="ease-in duration-300"
               x-transition:leave-start="opacity-100 scale-100"
               x-transition:leave-end="opacity-0 scale-90">
               <x-label for="remiderDateTime" class="mb-1" value="{{ __('Reminder Date Time') }}" />
               <x-custom.datepicker></x-custom.datepicker>
           </div>
           <div class="mt-4 flex items-center justify-between">
               <div class="flex items-center">
                   <input type="checkbox" name="isReminder" x-model="isReminder" id="checked-checkbox" class="w-4 h-4 rounded" wire:model="isReminder">
                   <label for="checked-checkbox" class="ms-2 text-sm font-medium dark:text-gray-500">Reminder</label>
               </div>
               <x-button class="ms-4 bg-gray-700 hover:bg-gray-900">
                   {{ $isUpdating ? __('Update') : __('Submit') }}
               </x-button>
           </div>
       </div>

Todos.php:

public $isReminder = false;
public function editTodo($id)
    {
        $todo = Todo::find($id);
        if ($todo) {
            $this->todoToUpdate = $todo->id;
            $this->title = $todo->title;
            $this->isReminder = $todo->isReminder;
            $this->remiderDateTime = $todo->remiderDateTime;
            $this->formTitle = 'Edit Todo';
            $this->isUpdating = true;
        }
    }
0 likes
10 replies
muuucho's avatar

Why don't you just set the reminder field as optional and skip the checkbox? (=Keep it simple)

gemini_man93's avatar

@muuucho yes you are right but If there is any issue like this in real world project and client required the same thing then what to do ?

Snapey's avatar

Do you use Laravel debugbar? This allows you to inspect the values of livewire components at the same time as looking at the html

Snapey's avatar

remove the x-model from the checkbox. You are binding the state to both Alpine and Livewire. But the states are not in sync

1 like
gemini_man93's avatar

@Snapey I tried:

x-effect="alert(isReminder)"

it gives me the 0 or 1, which is actual value of todo's isReminder, but issue still exists. checkebox not checked

gemini_man93's avatar

@Snapey now what I have done is: cast it to datatype.

$this->isReminder = (bool)$todo->isReminder;

and it is working now

Webforward's avatar
Level 1

I would typically model bind the form and cast any $model->is* attribute as a boolean in the model.

1 like

Please or to participate in this conversation.