This component is intended to be used as a simple native HTML value selection. It will best fit for most use cases on web apps.

If you need a rich selection value interface or async search check the Choices component.

Default attributes

By default, it will look up for:

  • $object->id for option value.
  • $object->name for option display label.

$users = App\Models\User::take(5)->get();
<x-select label="Master user" icon="o-user" :options="$users" wire:model="selectedUser" />
<x-select label="Right icon" icon-right="o-user" :options="$users" wire:model="selectedUser" />
<x-select label="Disabled" :options="$users" wire:model="selectedUser" disabled />
<x-select label="Master user" icon="o-user" :options="$users" wire:model="selectedUser" inline />

Alternative attributes

Just set option-value and option-label representing the desired targets.

Select one, please.
$users = App\Models\User::take(5)->get();
placeholder="Select an user"
placeholder-value="0" {{-- Set a value for placeholder. Default is `null` --}}
hint="Select one, please."
wire:model="selectedUser2" />

Disable options

$users = [
'id' => 1,
'name' => 'Joe'
'id' => 2,
'name' => 'Mary',
'disabled' => true
<x-select label="Disabled options" :options="$users" wire:model="selectedUser3" />