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

SiFuMax09's avatar

[FluxUI] Checkbox Component cant be clicked.

Hey Guys I just installed the new Livewire Starterkit and started working and then I cant click the remember me checkbox component. I dont see any errors in my browsers console and under the sources the flux.js and livewire.js are getting loaded.

This is the component: <flux:checkbox wire:model="remember" label="{{ __('Remember me') }}" />

When creating new flux:checkbox components it does not work too.

Can someone help me?

Thanks!

1 like
12 replies
vincent15000's avatar

Some flux components need to pay for the full package

RemiM's avatar

@vincent15000 This component is part of the free plan.

@sifumax09 I don't know if this is a typo, but the label attribute is not evaluated as a plain string in the login.blade.php so you should have the ":" before.

Moreover, did you try another browser or incognito mode?

1 like
SiFuMax09's avatar

I never modified any of that code it shipped so in the livewire starterkit and some fluxui component are free including that checkbox one.

1 like
SiFuMax09's avatar

It worked before that also a thing. But let me try using your advise and I come back with some results

SiFuMax09's avatar

So its not a browser problem I just checked with diffrent browsers.

SiFuMax09's avatar

Okay so I just checked the : before the label attribute.

And when doing <flux:checkbox wire:model="remember" :label="{{ __('Remember me') }}" />

Ye it absolutly brakes it. "syntax error, unexpected token "<""

So I need to use it without.

Any further help?

RemiM's avatar
RemiM
Best Answer
Level 16

@SiFuMax09 Look at your line:

<flux:checkbox wire:model="remember" :label="{{ __('Remember me') }}" />
  • The :label attribute is already expecting an expression, so it doesn't need {{ }}.
  • {{ __('Remember me') }} is a Blade syntax for outputting a value, but using it inside :label="" causes a syntax error.

The working version is the following:

<flux:checkbox wire:model="remember" :label="__('Remember me')" />
1 like
SiFuMax09's avatar

@RemiM So sadly it didn't work. I tried yours, and then I tried copying over the code from the livewire starter kit directly rebuilt my NPM, and it was not working. I am probably going to rebuild it because Laravel Spark doesn't like me either.

RemiM's avatar

@SiFuMax09 Since you are using Laravel Spark, did you check the compatibility with Laravel 12, and did you try other free Flux components?

From the Spark installation's composer.json file, it seems that they are still using Laravel 11.

You can also try to add the @livewireScripts directive in your body tag if it's not already there. See the Livewire installation.

SiFuMax09's avatar

@remim So i figured it it why I was not able to click the checkbox. I published all the assests from livewire and fluxui and i simply removed these files and then it worked.

So the Spark thing everything works with User based billing but when I switch it over that the tenant get billed the wbehooks dont get processed

Michal-Skoula's avatar

Same situation happening for me, and it's not just the sign in checkbox, I've also had issues clicking radio groups and checkboxes inside both blade and livewire components. What's even weirder is that it SOMETIMES works in chromium based browsers (~10% chance in brave), and it's even worked once in a firefox based browser (zen)

 <flux:checkbox wire:model="remember" :label="__('Remember me')" />
 <flux:radio.group name="weight_change_goal" class="mb-6">
                <flux:radio
                    label="Losing weight"
                    description="Sets your calorie goal as the maximum allowed daily calories."
                    value="cutting"
                    name="weight_change_goal"
                    checked
                />
                <flux:radio
                    label="Gaining weight"
                    description="Sets your calorie goal as the daily minimum to reach."
                    value="bulking"
                    name="weight_change_goal"
                />
                <flux:radio
                    label="Maintaining weight"
                    description="Checks if your daily calories are within 10% of your daily goal."
                    value="maintaining"
                    name="weight_change_goal"
                />

Here are some snippets i had issues with. This is what the devtools show on the login screen:

Uncaught DOMException: Operation is not supported
Uncaught DOMException: CustomElementRegistry.define: 'ui-disclosure' has already been defined as a custom element
    _ http://localhost:8000/flux/flux.js?id=fbde5aaf:125
    <anonymous> http://localhost:8000/flux/flux.js?id=fbde5aaf:125
    <anonymous> http://localhost:8000/flux/flux.js?id=fbde5aaf:128

Here are my package versions: Package.json

"dependencies": {
        "@tailwindcss/vite": "^4.0.7",
        "autoprefixer": "^10.4.20",
        "axios": "^1.7.4",
        "concurrently": "^9.0.1",
        "laravel-vite-plugin": "^1.0",
        "tailwindcss": "^4.0.7",
        "vite": "^6.0"
    },
    "optionalDependencies": {
        "@rollup/rollup-linux-x64-gnu": "4.9.5",
        "@tailwindcss/oxide-linux-x64-gnu": "^4.0.1",
        "lightningcss-linux-x64-gnu": "^1.29.1"
    }

composer.json

"require": {
        "php": "^8.2",
        "laravel/framework": "^12.0",
        "laravel/tinker": "^2.10.1",
        "livewire/flux": "^2.0",
        "livewire/livewire": "^3.6",
        "livewire/volt": "^1.6.7",
        "openai-php/laravel": "^0.11.0",
        "spatie/image": "^3.8",
        "spatie/image-optimizer": "^1.8"
    },
    "require-dev": {
        "barryvdh/laravel-debugbar": "^3.15",
        "barryvdh/laravel-ide-helper": "^3.5",
        "fakerphp/faker": "^1.23",
        "laravel/pail": "^1.2.2",
        "laravel/pint": "^1.18",
        "laravel/sail": "^1.41",
        "mockery/mockery": "^1.6",
        "nunomaduro/collision": "^8.6",
        "pestphp/pest": "^3.7",
        "pestphp/pest-plugin-laravel": "^3.1"
    },

If anyone has any solutions for me, I've tried everything mentioned in this thread, but nothing worked. Thank you in advance!

Edit: might be worth noting that I'm using Fedora 41 with an intel iGPU running under wayland

frankhosaka's avatar

The wire:model="remember" from resources.views.livewire.auth.login.blade.php is linked to app.Livewire.Auth.Login.php.

The challenge is to understand how Login.php is connected to login.blade.php.

I believe the magic lies in these lines:

#[Layout('components.layouts.auth')] summons various layers to receive the $slot.

class Login extends Component { public bool $remember=false ... }—here, I believe Livewire injects the whole class into the $slot, as well as invokes login.blade.php.

Please or to participate in this conversation.