v2 beta docs. Upgrade guide Back to v1
maryUI

Select

This component is intended to be used as a simple native HTML value selection. It renders nice on all devices.

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

Basic

By default, it will look up for:

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

Master user
Right icon
Prefix
Hey ho!
@php                                            
    $users = App\Models\User::take(5)->get();   
@endphp                                         
<x-select label="Master user" wire:model="selectedUser" :options="$users" icon="o-user" />
 
<x-select label="Right icon" wire:model="selectedUser" :options="$users" icon-right="o-user" />
 
<x-select label="Prefix" wire:model="selectedUser" :options="$users" prefix="Hey" hint="Hey ho!" />
 
<span></span>
<x-select label="Inline label" wire:model="selectedUser" icon="o-user" :options="$users" inline />

Alternative attributes

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

Alternative 
@php                                             
    $users = App\Models\User::take(5)->get();   
@endphp                                         
<x-select
    label="Alternative"
    wire:model="selectedUser2"
    :options="$users"
    option-value="custom_key"
    option-label="other_name" />

Placeholder

Users 
@php                                             
    $users = App\Models\User::take(5)->get();   
@endphp                                         
<x-select
    label="Users"
    wire:model="selectedUser2"
    :options="$users"
    placeholder="Select a user"
    placeholder-value="0" {{-- Set a value for placeholder. Default is `null` --}}
/>

States

Notice that browser standards does not support "readonly".

Disabled 
@php                                             
    $users = App\Models\User::take(5)->get();   
@endphp                                         
<x-select label="Disabled" :options="$users" wire:model="selectedUser" disabled />

Disabled options

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

Group

This component uses the native HTML grouped select.

Group 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" :options="$grouped" wire:model="selectedUser" />

Slots

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

Slots 
@php                                            
    $users = App\Models\User::take(5)->get();   
@endphp                                         
<x-select label="Slots"  :options="$users" single>
    <x-slot:prepend>
        {{-- Add `join-item` to all prepended elements --}}
        <x-button icon="o-trash" class="join-item" />
    </x-slot:prepend>
    <x-slot:append>
        {{-- Add `join-item` to all appended elements --}}
        <x-button label="Create" icon="o-plus" class="join-item btn-primary" />
    </x-slot:append>
</x-select>
Made with by Robson Tenório and contributors.