Logo
Neura
Back to Home

Select

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

Basic Usage

The most basic select with simple options: 
<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:
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:
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". 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.
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>

With Livewire

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

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:
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:
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":
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:
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

Selected: None

Multiple Select

Selected: [] 
<!-- Single select -->
<neura::select wire:model="selectedCountry" placeholder="Select country">
    <neura::select.option value="us" label="United States" />
</neura::select>

<!-- Multiple select -->
<neura::select wire:model="selectedCountries" :multiple="true">
    <neura::select.option value="us" label="United States" />
</neura::select>

<!-- In your Livewire component -->
public $selectedCountry = null;
public $selectedCountries = [];

Disabled State

Disable the select with disabled="true":
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":
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