Livewire 'disabled selected' on select field

When I use wire:model="foo" on my select fields the disabled selected option doesn't show as first selected.

Anyone now how to get a disabled selected placeholder to show first on select fields?

This is my hacky workaround and it feels wrong...

    // Component:
    public $lunch = null;

    public function mount(){
        $this->lunch = 'place_holder';
    }

    //Blade View:
    <select wire:model="lunch">
        <option value="place_holder" disabled selected>Choose One</option>
        <option value="1">Yes</option>
        <option value="0">No</option>
    </select>

chaudigv

5 years ago

Best Answer

Level 16

Whatever value $lunch holds, respective value will be selected.

I suggest to keep the value empty

$lunch = '';

// no mount function needed

and

<option value="" disabled>Choose One</option> // no need to use selected attr

I guess, this is still same way of doing what you did.

6 likes

daugaard47

5 years ago

Level 7

This is similar, but better. Thank you!

Please or to participate in this conversation.