Docs running with Livewire 4 - Beta try it →
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.