Select

Custom select dropdown with single and multiple selection and optional search. Options are provided either as a PHP array via options, or through a Livewire method via wire-options. Pass options for fixed or PHP-generated lists. When the list is large, expensive to produce, or depends on database state, wire-options is a better fit: the method is called once on first open and the result is cached client-side. If a value is already bound on load, the method is called immediately to resolve the display label. Because selection changes are applied via $wire.$set() internally, wire:model.live has no effect: use the live prop instead.

Keyboard:

• ↑ ↓ to navigate.
• Enter to select when the dropdown is open.
  When closed, Enter submits the parent form if there is one, or opens the dropdown otherwise.
• Escape to close.

Basic usage

Declare a method on your Livewire component and pass its name to wire-options. Use icon to add an icon, and floating for a floating label layout.

#[Renderless]
public function getLanguages(): array
{
    return [
        ['value' => 'en', 'label' => 'English'],
        ['value' => 'fr', 'label' => 'French'],
    ];
}

{{-- Standard --}}
<x-wirestrap::select
    id="language-select"
    label="Language"
    wire:model="language"
    wire-options="getLanguages"
    icon="bi-translate"
/>

{{-- Floating label --}}
<x-wirestrap::select ... floating />

Multiple

Add multiple to enable multi-selection. wire:model must bind to an array property. Selected options appear as badges with remove buttons, sorted alphabetically.

public array $selectedLanguages = [];

<x-wirestrap::select ... multiple />

Search

Add search to show a text input at the top of the dropdown. Options are filtered as you type. When the dropdown opens, focus moves to the search input automatically.

<x-wirestrap::select ... search />

Reactive list

Use wire-options-watch to invalidate the options cache when a Livewire property changes. The list reloads immediately if the dropdown is open or has a selected value, so the label can be resolved. Otherwise, it will reload the next time the dropdown is opened. To force a reload imperatively, use $wirestrap.select.refresh(id).

<x-wirestrap::select
    ...
    wire:model="category"
    wire-options="getCategories"
/>

<x-wirestrap::select
    ...
    wire:model="categoryItem"
    wire-options="getCategoryItems"
    wire-options-watch="category"
/>

Option groups

Add an optgroup field to options that should be grouped. Options sharing the same value are rendered together under that label. Options without optgroup appear after all groups.

#[Renderless]
public function getCountries(): array
{
    return [
        ['value' => 'fr', 'label' => 'France', 'optgroup' => 'Europe'],
        ['value' => 'de', 'label' => 'Germany', 'optgroup' => 'Europe'],
        ['value' => 'us', 'label' => 'United States', 'optgroup' => 'Americas'],

        // No optgroup: appears after all groups
        ['value' => 'xx', 'label' => 'Other'],
    ];
}

Empty value

When the bound value equals empty-value, the component displays the placeholder instead of a selection. Useful for filters where a specific value like "0" or "all" means "no filter applied".

<x-wirestrap::select ... empty-value="0" />

Disabled

Use disabled to disable the whole component. Individual options can be disabled by setting 'disabled' => true on their array entry.

<x-wirestrap::select ... disabled />

// Set disabled on individual entries in the returned array
[
    'value' => 'de',
    'label' => 'German',
    'disabled' => true,
],

Rich content

Use html_prefix and html_suffix on individual option entries to inject raw HTML before and after the label. The label itself is always rendered as plain text. Use class on an option to apply a CSS class to its element.

// Pass free HTML before and / or after the label
[
    'value' => $user->id,
    'html_prefix' => '<i class="bi bi-person"></i>',
    'label' => $user->name,
    'html_suffix' => '<span class="badge-' . $user->role->color . '">' . $user->role->name . '</span>',
],

Inline options

Pass options directly as a PHP array with options instead of a Livewire method. The short form accepts an associative array of value => label pairs. The full form supports the same fields as a wire-options method would return: disabled, optgroup, class, html_prefix, html_suffix. Options update automatically when Livewire re-renders the component.

{{-- Short syntax --}}
<x-wirestrap::select
    ...
    :options="[
        'fr' => 'France',
        'de' => 'Germany',
        'es' => 'Spain'
    ]"
/>

{{-- Full form with html_prefix / html_suffix --}}
<x-wirestrap::select
    ...
    :options="[
        ['value' => 1, 'label' => 'Alice Martin', ...],
        ['value' => 2, 'label' => 'Bob Dupont', ...],
    ]"
    search
/>

Validation

The component checks $errors for the wire:model key and applies the invalid state if found. Try submitting without selecting a language.

{{-- Suppress both the invalid class and the error message --}}
<x-wirestrap::select ... :has-validation="false" />

{{-- Keep the invalid class, hide the error message --}}
<x-wirestrap::select ... :has-validation-message="false" />

Props

x-wirestrap::select

Option definition

$wirestrap.select