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

brianhorlings's avatar

Herd on Windows, Livewire StarterKit, Flux Select Not Working

I'm trying to learn Livewire so I'm following the Livewire 3 from scratch course. I am using the Laravel 12 with the new Livewire starter kit. I've added a flux:select to my form but I cannot get it to render properly. A regular input looks fine but the select looks disabled and I cannot select anything.

0 likes
3 replies
LaryAI's avatar
Level 58

To troubleshoot the issue with the flux:select component not rendering properly in your Livewire project, let's go through a few steps to ensure everything is set up correctly. Here are some common checks and a basic example to help you get started:

  1. Ensure Dependencies are Installed: Make sure you have all the necessary dependencies installed. Run the following commands to ensure your packages are up to date:

    composer install
    npm install
    npm run dev
    
  2. Check Blade Component Registration: Ensure that the flux:select component is correctly registered. If it's a custom component, it should be registered in your AppServiceProvider or wherever you register your components.

  3. Verify Component Usage: Make sure you are using the flux:select component correctly in your Blade file. Here's a basic example of how it might look:

    <div>
        <flux:select
            wire:model="selectedOption"
            :options="$options"
            placeholder="Select an option"
        />
    </div>
    

    In this example, selectedOption is a property in your Livewire component, and $options is an array of options you want to display.

  4. Check Livewire Component: Ensure your Livewire component is set up correctly. Here's a simple example:

    <?php
    
    namespace App\Http\Livewire;
    
    use Livewire\Component;
    
    class ExampleComponent extends Component
    {
        public $selectedOption;
        public $options = [
            'Option 1',
            'Option 2',
            'Option 3',
        ];
    
        public function render()
        {
            return view('livewire.example-component');
        }
    }
    
  5. Inspect Console for Errors: Open your browser's developer tools and check the console for any JavaScript errors that might indicate why the component isn't rendering.

  6. Check for CSS/JS Conflicts: Ensure there are no CSS or JavaScript conflicts that might be affecting the rendering of the component. Sometimes, third-party libraries can interfere with each other.

  7. Update Livewire and Flux: Make sure you are using the latest versions of Livewire and any related packages. You can update them using:

    composer update livewire/livewire
    npm update
    

By following these steps, you should be able to identify and resolve the issue with the flux:select component not rendering properly. If the problem persists, consider providing more details or error messages for further assistance.

RemiM's avatar

Have you try to hard code it?

<flux:select wire:model="industry" placeholder="Choose industry...">
    <flux:select.option>Photography</flux:select.option>
    <flux:select.option>Design services</flux:select.option>
    <flux:select.option>Web development</flux:select.option>
    <flux:select.option>Accounting</flux:select.option>
    <flux:select.option>Legal services</flux:select.option>
    <flux:select.option>Consulting</flux:select.option>
    <flux:select.option>Other</flux:select.option>
</flux:select>

If it works, it's most likely a problem in your logic. However, if it does not, you can try to add the @livewireScripts directive in your body tag if it's not already there. See the documentation.

brianhorlings's avatar

@RemiM I think I figured it out. On a whim, I started a new site and it worked so I am assuming something happened during the install via Herd or something was wrong in the starterkit that was corrected when Herd updated yesterday.

Please or to participate in this conversation.