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 a 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>
{{-- Add `rounded-e-none` (RTL support) --}}
<x-button icon="o-trash" class="rounded-e-none" />
</x-slot:prepend>
<x-slot:append>
{{-- Add `rounded-s-none` (RTL support) --}}
<x-button label="Create" icon="o-plus" class="rounded-s-none btn-primary" />
</x-slot:append>
</x-select>

Group

This component uses the native HTML grouped select.

@php
$grouped = [
'Admins' => [
['id' => 1, 'name' => 'Mary'],
['id' => 2, 'name' => 'Giovanna'],
['id' => 3, 'name' => 'Marina']
],
'Users' => [
['id' => 4, 'name' => 'John'],
['id' => 5, 'name' => 'Doe'],
['id' => 6, 'name' => 'Jane']
],
];
@endphp
 
<x-select-group label="Group Select Demo" :options="$grouped" wire:model="selectedUser" />

maryUI
Sponsor