new
The real time chat demo: Ping →

Select

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.

@php
$users = App\Models\User::take(5)->get();
@endphp
 
<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.
@php
$users = App\Models\User::take(5)->get();
@endphp
 
<x-select
label="Alternative"
:options="$users"
option-value="custom_key"
option-label="other_name"
placeholder="Select an user"
placeholder-value="0" {{-- Set a value for placeholder. Default is `null` --}}
hint="Select one, please."
wire:model="selectedUser2" />

Disable options

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

Slots

You can append or prepend anything like this. Make sure to use appropriated css round class on left or right.

@php
$users = App\Models\User::take(5)->get();
@endphp
 
<x-select label="Slots" :options="$users" single>
<x-slot:prepend>
<x-button icon="o-trash" class="rounded-r-none" />
</x-slot:prepend>
<x-slot:append>
<x-button label="Create" icon="o-plus" class="rounded-l-none btn-primary" />
</x-slot:append>
</x-select>

maryUI
Sponsor