Custom inputs aren't working with native form submissions

[grpaiva]

I'm trying to use a checkbox in a regular form with attributes like name="model" instead of wire:model:

<flux:field variant="inline">
    <flux:checkbox name="terms" />
    <flux:label>...</flux:label>
</flux:field>

The problem is, the checkbox component isn't passing the name attribute down to the final checkbox element. In this example, that means the form submits without the $terms variable, even if the checkbox is checked.

<ui-field class="..." data-flux-field="">
    <ui-checkbox class="..." data-flux-control="" data-flux-checkbox="" aria-checked="false" role="checkbox" tabindex="0" aria-labelledby="...">
        <svg class="..." data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">...</svg>

        <svg class="" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">...</svg>

    </ui-checkbox>

    <ui-label class="" data-flux-label="" id="..." aria-hidden="true">...</ui-label>
</ui-field>

Looking at the component's code, I see there’s a @props directive setting a $name variable with the value of wire:model, but I don’t think it’s actually being used anywhere.

Thanks a lot!

[calebporzio]

Thanks for this, currently Flux doesn't support using it's custom input elements (checkbox, radio, switch, listbox, etc.) in native forms. We intend to explore this ability so I'm going to leave this issue open until then. Thank you for the report.

[aydinza]

Hey guys,

This is a big concern. No matter what I tried, the checkbox does not submit the terms accepted. On the browser inspect, it seems working, but somehow, it does not submit the "accepted" value to the db. Thus, it gives the required terms error.

I have been working on this for last 3 days. Now, I have to wait till you release an update on this. Till then, I will remove the terms "required" attribute.

Thanks.

[grpaiva]

Hey @aydinza , here's a quick workaround with AlpineJS that I used to fix this issue in the jetstream-flux package:

<flux:field variant="inline" x-data="{ terms: false }">
    <input type="checkbox" name="terms" id="terms" x-model="terms" class="hidden" />
    <flux:checkbox x-model="terms" />
    <flux:label>...</flux:label>
</flux:field>

I know it's not the prettiest approach, but if you want your checkbox to stay consistent with Flux in a native form, I think this is the only way to go (at least for now).

[aydinza]

Actually I have tried that. But mine did not work. I been trying to apply the dark mode and guess I changed some jx settings or maybe another script just messed up things.

Till there's a fix, I will keep the terms not required and auto seeded as true.

Thanks for the respond.