Combobox

Autocomplete input and command palette with a list of suggestions.

Heads up!

This is a Livewire Component, so in order to use it, your project needs to have Livewire set up.

Consider this component a pre-release since its still missing keyboard navigation and ARIA related attributes.

It can be used together with your existing Eloquent Models by default. If you want to use this component without an underlying model, you can adjust this behaviour in app/Livewire/Ui/Combobox.php after you've published it.

The searchable prop defines which model attributes should be searched.

The display prop defines which model attribute should be used to display the selected result.

Try searching for 'wil'

@use('App\Models\DemoMail')
 
<div class="flex flex-col space-y-2">
    <x-typography.muted>Try searching for 'wil'</x-typography.muted>
    <livewire:ui.combobox
        :model="DemoMail::class"
        :searchable="['name']"
        display="name"
        placeholder="Search..."
    />
</div>

Installation

php artisan vendor:publish --tag=combobox --force

Usage

@use('App\Models\<YourModel>')
 
<livewire:ui.combobox
    :model="<YourModel>::class"
    :searchable="['name']"
    display="name"
    placeholder="Search..."
/>

On This Page

Installation
Usage