Form Components

Select

By default, selection will look up for:

$object->id for option value.
$object->name or $object->title for option label.
$object->avatar or $object->image for option picture.
$object->description for option description.

# Basic usage

@php
    $users = App\Models\User::get(); // OR
    // $users = App\Models\User::pluck('name', 'id');
@endphp
 
<x-select wire:model="user_id" :options="$users" />
<x-select wire:model="skills" :options="['PHP', 'Laravel', 'Livewire']" multiple clearable />

# Multiple select

@php
    $users = App\Models\User::all('id', 'name');
@endphp
 
<x-select wire:model="user_id" :options="$users" multiple />

# Clearable

@php
    $users = App\Models\User::all('id', 'name');
@endphp
 
<x-select wire:model="user_id" :options="$users" multiple clearable />

# Searchable

@php
    $users = App\Models\User::all('id', 'name');
@endphp
 
<x-select wire:model="user_id" :options="$users" multiple searchable />

# Limit selection

@php
    $users = App\Models\User::all('id', 'name');
@endphp
 
<x-select wire:model="user_id" :options="$users" limit="2" multiple />

# With image

@php
    $users = App\Models\User::all('id', 'name', 'email', 'avatar');
@endphp
 
<x-select wire:model="user_id" :options="$users" multiple />

# With description

@php
    $users = App\Models\User::all('id', 'name', 'bio as description');
@endphp
 
<x-select wire:model="user_id" :options="$users" multiple />

# With enum class

@php
    // enum UserRolesEnum: string
    // {
    //     case Admin = 'admin';
    //     case User = 'user';
    //     case Moderator = 'moderator';
 
    //     public static function options(): array
    //     {
    //         return array_column(self::cases(), 'name', 'value');
    //     }
    // }
@endphp
 
<x-select wire:model="role" :options="App\Enums\UserRolesEnum::options()" />

# All property

Users

Only 3 user can be select

@php
    $options = [
        [
            'id' => 1,
            'name' => 'Taylor Otwell',
            'avatar' => 'https://avatars.githubusercontent.com/u/463230?s=160&v=4',
            'description' => 'Creator of Laravel',
        ],
        [
            'id' => 2,
            'name' => 'Caleb Porzio',
            'avatar' => 'https://pbs.twimg.com/profile_images/1748020965995335681/WTNy9HSl_400x400.jpg',
            'description' => 'Creator of Livewire and Alpine.js',
        ],
        [
            'id' => 3,
            'name' => 'Nuno Maduro',
            'avatar' => 'https://avatars.githubusercontent.com/u/5457236?v=4',
            'description' => 'Creator of Pest PHP',
        ],
        [
            'id' => 4,
            'name' => 'Jeffrey Way',
            'avatar' => 'https://pbs.twimg.com/profile_images/1863195807303778304/1Ka0l26C_400x400.jpg',
            'description' => 'Creator of Laracast',
        ],
    ];
@endphp
 
<x-select label="Users" :options="$options" limit="3" placeholder="Select user"
    hint="Only 3 user can be select" multiple searchable clearable />

# Size variants

<x-select xs />
<x-select sm />
<x-select md />
<x-select lg />
<x-select xl />