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