Combobox

Searchable dropdown for selecting from a list of options.

Examples

Basic Combobox

Filter through options by typing. Supports keyboard navigation.

Selected value:

blade 
<x-plume::form :showAlerts="false" formData="{ 'selectedFramework': '' }">
    <x-plume::form.combobox label="Framework" model="selectedFramework" :options="[
        ['value' => 'laravel', 'label' => 'Laravel'],
        ['value' => 'vue', 'label' => 'Vue.js'],
        ['value' => 'react', 'label' => 'React'],
        ['value' => 'alpine', 'label' => 'Alpine.js'],
        ['value' => 'tailwind', 'label' => 'Tailwind CSS'],
    ]" />
    <p class="mt-4 text-xs text-foreground/50 dark:text-background-400">
        Selected value: <span class="font-mono text-primary combobox-test-value"
            x-text="data.selectedFramework || 'none'"></span>
    </p>
</x-plume::form>

Custom Empty Message

Customize the message shown when no results match.

blade 
<x-plume::form :showAlerts="false" formData="{ 'selected': '' }">
    <x-plume::form.combobox label="Language" model="selected" placeholder="Choose a language..."
        empty-message="No language found." :options="[
            ['value' => 'en', 'label' => 'English'],
            ['value' => 'es', 'label' => 'Spanish'],
            ['value' => 'fr', 'label' => 'French'],
        ]" />
</x-plume::form>
Prop Type Default Description
label string null The label for the combobox.
name string null HTML name attribute.
id string null HTML id attribute. Auto-generated from name if not provided.
model string null AlpineJS model name for two-way binding.
options array [] Array of options: [{value: 1, label: 'One'}] or [1 => 'One'].
placeholder string 'Select option...' Placeholder text when no value is selected.
emptyMessage string 'No results found.' Message to show when filtering returns no results.
onSelect string null AlpineJS expression or function to call when an option is selected.

Usage

blade 
<x-plume::form :showAlerts="false">
    <x-plume::form.combobox label="Country" model="country" :options="[
        ['value' => 'us', 'label' => 'United States'],
        ['value' => 'uk', 'label' => 'United Kingdom'],
    ]" />
</x-plume::form>