Get started
View as Markdown Open in v0 Open in ChatGPT Open in Claude Open in Scira

Combobox

An autocomplete input with a filterable listbox. Requires Alpine.js.

Usage
Laravel
Livewire
Alpine.js
Tailwind CSS
example.blade.php 
<x-slate::combobox class="max-w-xs">
    <x-slate::combobox-input placeholder="Select framework..." />
    <x-slate::combobox-content>
        <x-slate::combobox-item value="laravel">Laravel</x-slate::combobox-item>
        <x-slate::combobox-item value="livewire">Livewire</x-slate::combobox-item>
        <x-slate::combobox-item value="alpine">Alpine.js</x-slate::combobox-item>
        <x-slate::combobox-item value="tailwind">Tailwind CSS</x-slate::combobox-item>
    </x-slate::combobox-content>
</x-slate::combobox>

With a field label
Blade
Livewire
Inertia

Type to filter options.

example.blade.php 
<x-slate::field class="max-w-xs">
    <x-slate::field-label>Stack</x-slate::field-label>
    <x-slate::combobox>
        <x-slate::combobox-input placeholder="Search…" />
        <x-slate::combobox-content>
            <x-slate::combobox-item value="blade">Blade</x-slate::combobox-item>
            <x-slate::combobox-item value="livewire">Livewire</x-slate::combobox-item>
            <x-slate::combobox-item value="inertia">Inertia</x-slate::combobox-item>
        </x-slate::combobox-content>
    </x-slate::combobox>
    <x-slate::field-description>Type to filter options.</x-slate::field-description>
</x-slate::field>

Composition
code 
Combobox
├── ComboboxInput
└── ComboboxContent
    └── ComboboxItem (repeat)

Prefer a command palette pattern? See Command. Prefer a native select? See Select.

Keyboard & Livewire

Arrow keys move the active option; Enter selects; Escape closes. Pass name or wire:model on the root to bind the selected value.

example.blade.php 
<x-slate::combobox name="framework" wire:model="framework" class="max-w-xs">
    <x-slate::combobox-input placeholder="Select framework..." />
    <x-slate::combobox-content>
        <x-slate::combobox-item value="laravel">Laravel</x-slate::combobox-item>
        <x-slate::combobox-item value="livewire">Livewire</x-slate::combobox-item>
    </x-slate::combobox-content>
</x-slate::combobox>
Last updated . · Legal