Radio group and Select Input invalid parameter not working

[alecsyc]

Flux version

v2.10.2

Livewire version

v3.7.3

Tailwind version

v4.0.7

Browser and Operating System

Edge, Firefox

What is the problem?

I am using fluxui-pro and I have an issue with with the invalid parameter on flux:select.input and flux:radio.group. The invalid border is not coming out, only the error message. (the normal inputs are working fine)

Initialy on version Fluxui v2.9.2 and laravel v12.43.1 the flux:select.input was working fine but not the flux:radio.group, so i did an upgrade to last version of composer and npm packages and now even the flux:select.input is not working anymore.

Thank you

Code snippets to replicate the problem

<flux:select 
    wire:model.live="city" 
    flux:model="city"
    variant="combobox" 
    :filter="false"
    :label="__('City')"
>   
    <x-slot name="input">
        <flux:select.input wire:model.live="search" clearable :invalid="true" />
    </x-slot>

    @foreach ($this->cities as $city)
        <flux:select.option value="{{ $city['name'] }} ({{$city['province_code']}})" wire:key="{{ $city['id'] }}" >
            {{ $city['name'] }}
        </flux:select.option>
    @endforeach
</flux:select>


<flux:radio.group wire:model="purpose_id" :label="__('Purpose')" variant="cards" :indicator="false" :invalid="true" class="max-sm:flex-col flex-wrap">
    @foreach ($this->purposes as $purpose)
        <flux:radio :value="$purpose->id" icon="truck" :label="__($purpose->name)" description="" class="min-w-xs" />          
    @endforeach
</flux:radio.group>

Screenshots/ screen recordings of the problem

Select input

Radio group

How do you expect it to work?

See the invalid border

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[ganyicz]

Hi @alecsyc,

thanks for reporting!

I've submitted a PR with a fix for the invalid combobox styling.

Two notes:

1. I would recommend applying invalid to the flux:select itself, not the flux:select.input if it's the select that has a validation error. Currently the invalid styling on flux:select.input is meant for inline errors with the input itself and makes the text red. You can see an example of this when you start typing and click the "create new" option here: https://fluxui.dev/components/select#with-validation
2. The radio buttons intentionally do not have a red border, the validation error is on the flux:radio.group not on the individual items. The only option would be to make all the options have red border which would be excessive.