Radio Group Value

[nsbz1]

The radio cards don't appear to be passing the chosen value, or I'm missing something very obvious. My original setup was using stripe plan_id values, so I dumbed it down to use just your example code and am experiencing the same issue.

I also tested to ensure I was able to use other flux fields in case it was me not loading the js or css properly, but I had no issues capturing values from flux select and input fields when rendered along with the radio cards. I kept the email field to show the syntax I'm using just in case you want to compare. I also did a "Dump and Die" dd($request->all()); first thing in the method called from the form to ensure I wasn't corrupting the incoming values in any way. Just in case, I also tried different variable names without any symbols in the names. Creating new ones like email2 worked as well. The issue appears to be specific to the cards.

                <flux:radio.group wire:model="ship" label="Shipping" variant="cards" :indicator="false" class="max-sm:flex-col">

                    <flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" />

                    <flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" />

                    <flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" />

                </flux:radio.group>

                <flux:field>

                    <flux:label>Email</flux:label>

                    <flux:input wire:model="email" type="email" />

                    <flux:error name="email" />

                </flux:field>

Thank you in advance!

[jeffchown]

@nsbz1 Your code (with a couple of minor additions) works for me:

flux-test.blade.php

<form wire:submit="save">
    <flux:radio.group wire:model="ship" label="Shipping" variant="cards" :indicator="false" class="max-sm:flex-col">
        <flux:radio value="standard" icon="truck" label="Standard" description="4-10 business days" />
        <flux:radio value="fast" icon="cube" label="Fast" description="2-5 business days" />
        <flux:radio value="next-day" icon="clock" label="Next day" description="1 business day" />
    </flux:radio.group>

    <flux:field>
        <flux:label>Email</flux:label>
        <flux:input wire:model="email" type="email" />
        <flux:error name="email" />
    </flux:field>

    <flux:button type="submit">Submit</flux:button>
</form>

FluxTest.php

class FluxTest extends Component
{
    public string $ship = '';

    public string $email = '';

    public function save(): void
    {
        dd($this->ship, $this->email);
    }

    public function render()
    {
        return view('livewire.flux-test');
    }
}

and I get this:

Have you run npm run build?

[nsbz1]

Your test works perfectly for me too! I think the issue is/was my form. I was trying to plug the flux elements into a default Laravel "register" blade posting to a route with csrf. I thought flux could be used on that too. Obviously that isn't the case for each element type or I'm missing something still. I'll just rework the register to use Livewire.

Thank you!

[jeffchown]

You're welcome, @nsbz1 !

[jeffchown]

PS This wasn't a Flux issue, you can't use Livewire'swire:model outside of a Livewire component

[nsbz1]

Yeah, I should have caught that when I switched over to the sample code test. FYI, my original setup with Stripe prices/options didn't use any livewire code though.

                    <flux:radio.group label="Plans" name="plan_id" variant="cards" :indicator="false" class="flex-col">
                        <flux:radio value="price_1Oc1ohJsJvuxEG4cAEISvKsQ" label="Free Profile!" description="Free Profile" checked />
                        <flux:radio value="price_1OJ94FJsJvuxEG4cWOyCIxaD" label="Business Profile" description="Business Profile" />
                    </flux:radio.group>

As long as I can make it work with Livewire, no worries though. Have a nice Thanksgiving!

[jeffchown]

Gotcha, @nsbz1. I'm sure you can - I have converted most of the Laravel Jetstream views to use Flux and all works well (thought I'm not using Livewire in those cases, I just 'Fluxified' the Jetstream components, e.g. x-input, x-button, etc.).

Thanks, I've had my Thanksgiving ;) (live in Canada).

You have a great, Thanksgiving!

[calebporzio]

Glad this was partially resolved - thanks @jeffchown

Currently Flux form elements don't work outside of staandard Livewire wire:model forms.

We have an issue open and intend to address this soon: #341