new
Livewire Volt extension for VSCode. Voltage →
maryUI

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