Logo
Neura UI
Loading…
Logo
All pages 86

Select

Select component for choosing single or multiple options from a dropdown list

Basic Usage

The most basic select with simple options:
blade 
<neura::select placeholder="Choose an option">
    <neura::select.option value="option1" label="Option 1" />
    <neura::select.option value="option2" label="Option 2" />
    <neura::select.option value="option3" label="Option 3" />
</neura::select>

With Label

Add a label to the select with the label attribute:
blade
Choose Country 
<neura::field>
    <neura::label>Choose Country</neura::label>
    <neura::select placeholder="Select a country">
        <neura::select.option value="us" label="United States" />
        <neura::select.option value="uk" label="United Kingdom" />
    </neura::select>
</neura::field>

Searchable

Enable search with searchable="true" to filter options:
blade
Search Country 
<neura::select 
    placeholder="Search or select..." 
    :searchable="true"
>
    <neura::select.option value="us" label="United States" />
    <neura::select.option value="uk" label="United Kingdom" />
</neura::select>

Multiple Selection

Enable multiple selection with multiple="true". Each option shows a checkbox at the start to indicate selection. The dropdown stays open while picking, and the search filter is kept between selections. Important: For a multiple select, you must use wire:model or x-model with an array. Without binding, the multiple select will not work correctly.
blade
Select Multiple Options 
<div x-data="{ multipleSelection: [] }">
    <neura::select 
        placeholder="Choose options..." 
        :multiple="true"
        x-model="multipleSelection"
    >
        <neura::select.option value="option1" label="Option 1" />
        <neura::select.option value="option2" label="Option 2" />
    </neura::select>
</div>

Actions & Panels

Attach an action button to the end of the select with the action slot. Clicking it swaps the dropdown content to a named panel — same container, with a back button to return to the options list. Perfect for "create new" flows without leaving the select.
blade
Assign to 
<neura::select placeholder="Select a member" :searchable="true">
    <neura::select.option value="alice" label="Alice Martin" />
    <neura::select.option value="bob" label="Bob Dupont" />

    <!-- Button attached at the end of the select -->
    <x-slot:action>
        <neura::select.action panel="invite" icon="plus" label="Invite a member" />
    </x-slot:action>

    <!-- Panels rendered inside the same dropdown container -->
    <x-slot:panels>
        <neura::select.panel name="invite" heading="Invite a member">
            <div class="space-y-2">
                <neura::input placeholder="email@example.com" />
                <neura::button size="sm" class="w-full">Send invitation</neura::button>
            </div>
        </neura::select.panel>
    </x-slot:panels>
</neura::select>

Option Prefix & Suffix

Each option accepts a prefix and a suffix slot. Use them for avatars, badges, shortcuts — or a select.option-action button that opens a panel for that row.
blade
Choose a plan 
<neura::select placeholder="Select a plan">
    <neura::select.option value="pro" label="Pro">
        <x-slot:prefix>
            <neura::icon name="rocket-launch" class="size-4" />
        </x-slot:prefix>
        <x-slot:suffix>
            <neura::badge size="sm" color="primary">Popular</neura::badge>
        </x-slot:suffix>
    </neura::select.option>

    <neura::select.option value="enterprise" label="Enterprise">
        <x-slot:suffix>
            <!-- Per-row action opening a panel -->
            <neura::select.option-action panel="enterprise-info" icon="information-circle" />
        </x-slot:suffix>
    </neura::select.option>

    <x-slot:panels>
        <neura::select.panel name="enterprise-info" heading="Enterprise plan">
            ...
        </neura::select.panel>
    </x-slot:panels>
</neura::select>

With Livewire

Use wire:model to sync with Livewire. Initialize your Livewire properties to avoid null states.
blade

Single Select

Multiple Select 

<!-- Single select -->
<neura::select wire:model="selectedCountry" placeholder="Select country">
    <neura::select.option value="us" label="United States" />
    <neura::select.option value="fr" label="France" />
    <neura::select.option value="es" label="Spain" />
</neura::select>

<!-- Multiple select -->
<neura::select wire:model="selectedCountries" :multiple="true" placeholder="Select countries">
    <neura::select.option value="us" label="United States" />
    <neura::select.option value="fr" label="France" />
    <neura::select.option value="es" label="Spain" />
    <neura::select.option value="it" label="Italy" />
</neura::select>

<!-- Livewire component properties -->
public $selectedCountry = 'us';
public $selectedCountries = ['us', 'fr'];

Default Value

Set a default selected option using the value prop. This works without wire:model or x-model :
blade
Select with Default 
<neura::select 
    placeholder="Choose an option" 
    value="option2"
>
    <neura::select.option value="option1" label="Option 1" />
    <neura::select.option value="option2" label="Option 2" />
    <neura::select.option value="option3" label="Option 3" />
</neura::select>
For multiple selects, use an array:
blade
Multiple Select with Defaults 
<neura::select 
    placeholder="Choose options..." 
    :multiple="true"
    :value="['option1', 'option3']"
>
    <neura::select.option value="option1" label="Option 1" />
    <neura::select.option value="option2" label="Option 2" />
    <neura::select.option value="option3" label="Option 3" />
</neura::select>
Note: If you use wire:model or x-model , the value from the model takes precedence. The value prop is only used as a fallback when no value is set in the model.

Clearable

Add a button to clear the selection with clearable="true":
blade
Clearable Select 
<neura::select 
    placeholder="Choose an option" 
    :clearable="true"
>
    <neura::select.option value="option1" label="Option 1" />
</neura::select>

With Icons

Add icons to options and trigger:
blade
Select with Icons 
<neura::select icon="globe-alt">
    <neura::select.option value="us" label="United States" icon="flag" />
    <neura::select.option value="uk" label="United Kingdom" icon="flag" />
</neura::select>

With Livewire

Use wire:model to sync with Livewire:

Single Select

Preview
Selected: None

Multiple Select

Disabled State

Disable the select with disabled="true":
blade
Disabled Select 
<neura::select 
    placeholder="Disabled select" 
    :disabled="true"
>
    <neura::select.option value="option1" label="Option 1" />
</neura::select>

Invalid State

Display an error state with invalid="true":
blade
Required Field 
<neura::select 
    placeholder="Please select an option" 
    :invalid="true"
>
    <neura::select.option value="option1" label="Option 1" />
</neura::select>

Complex Examples

Searchable Multiple Select

Select Countries

Use Cases

Country/Region Selection

Country

Tag Selection

Select Tags

Best Practices

✓ Do

  • Use searchable for lists with many options (5+)
  • Use clearable when users need to easily reset
  • Use multiple only when multiple selections are needed
  • Always use wire:model or x-model with an array for multiple selects
  • Provide clear and descriptive placeholders
  • Organize options logically (alphabetically, by popularity, etc.)

✗ Don't

  • Don't use a select for only 2-3 options (use radio buttons)
  • Don't create lists with too many options (max 50-100 recommended)
  • Don't forget to validate selection on the server side
  • Don't use multiple for single selection
  • Don't create options with labels that are too long
  • Never use multiple="true" without wire:model or x-model with an array

Properties

Select Properties

Property Type Default Description
name string|null auto Field name (automatically detected from wire:model or x-model)
label string|null null Label displayed above the select
placeholder string|null 'select ...' Text displayed when no option is selected
searchable bool false Enable search to filter options
multiple bool false Allow multiple selection. Required: must use wire:model or x-model with an array
clearable bool false Display a button to clear the selection
disabled bool false Disable the select
icon string|null null Icon to display to the left of the trigger
iconAfter string 'chevron-up-down' Icon to display to the right of the trigger (chevron by default)
invalid bool|null null Display an error state

Select Option Properties

Property Type Default Description
value mixed required Option value
label string|null null Option label (uses slot if not provided)
icon string|null null Icon to display to the left of the option
prefix string|slot null Content displayed before the label (icon, avatar...). Takes precedence over icon
suffix string|slot null Content displayed at the end of the row (badge, shortcut, option-action...)

Select Slots

Slot Description
action One or more select.action buttons attached to the end of the select trigger
panels One or more select.panel rendered inside the dropdown container

Select Action Properties

Property Type Default Description
panel string|null null Name of the panel to open on click. Without it, bind your own handler (wire:click, x-on:click...)
icon string|null 'plus' Icon of the button ('plus' when the slot is empty)
label string|null null Accessible label (aria-label + title)

Select Panel Properties

Property Type Default Description
name string required Panel identifier, referenced by the panel prop of action buttons
heading string|null null Title displayed in the panel header
back bool true Display the back button returning to the options list (Escape also goes back)
backLabel string|null 'Back' Accessible label of the back button (translated by default)

Select Option Action Properties

Property Type Default Description
panel string|null null Name of the panel to open on click
icon string 'ellipsis-horizontal' Icon of the row action button
label string|null null Accessible label (aria-label + title)