Select

<x-select.native :options="[
    ['label' => 'TALL', 'value' => 1],
    ['label' => 'LIVT', 'value' => 2],
]" />

When the value and label do not come from the label and value positions respectively, you must specify this manually using the select attribute:

<x-select.native :options="[
    ['name' => 'TALL', 'id' => 1],
    ['name' => 'LIVT', 'id' => 2],
]" select="label:name|value:id" />

<x-select.styled  :options="[
    ['label' => 'TALL', 'value' => 1],
    ['label' => 'LIVT', 'value' => 2],
]" />

When the value and label do not come from the label and value positions respectively, you must specify this manually using the select attribute:

<x-select.styled  :options="[
    ['name' => 'TALL', 'id' => 1],
    ['name' => 'LIVT', 'id' => 2],
]" select="label:name|value:id" />

The styled select allows you to display an image next to the option label. To do this, the options simply have an index called image with the image URL.

<x-select.styled :options="[
    ['label' => 'Taylor Otwell', 'value' => 1, 'image' => 'https://unavatar.io/github/taylorotwell'],
    ['label' => 'Nuno Maduro', 'value' => 2, 'image' => 'https://unavatar.io/github/nunomaduro'],
    ['label' => 'Jess Archer', 'value' => 3, 'image' => 'https://unavatar.io/github/jessarcher'],
]" />

You can also set a different index to the image via the select attribute.

<x-select.styled :options="[
    ['label' => 'Taylor Otwell', 'value' => 1, 'preview' => 'https://unavatar.io/github/taylorotwell'],
    ['label' => 'Nuno Maduro', 'value' => 2, 'preview' => 'https://unavatar.io/github/nunomaduro'],
    ['label' => 'Jess Archer', 'value' => 3, 'preview' => 'https://unavatar.io/github/jessarcher'],
]" select="label:label|value:value|image:preview" />

You can also set a description for each option. To do this, the options simply have an index called description .

<x-select.styled :options="[
    ['label' => 'Taylor Otwell', 'value' => 1, 'description' => 'Taylor Otwell is the creator of Laravel'],
    ['label' => 'Nuno Maduro', 'value' => 2, 'description' => 'Nuno Maduro is the creator of PestPHP'],
    ['label' => 'Jess Archer', 'value' => 3, 'description' => 'Jess Archer is the creator of Laravel Prompts'],
]" />

You can also set a different index to the description via the select attribute:

<x-select.styled :options="[
    ['label' => 'Taylor Otwell', 'value' => 1, 'note' => 'Taylor Otwell is the creator of Laravel'],
    ['label' => 'Nuno Maduro', 'value' => 2, 'note' => 'Nuno Maduro is the creator of PestPHP'],
    ['label' => 'Jess Archer', 'value' => 3, 'note' => 'Jess Archer is the creator of Laravel Prompts'],
]" select="label:label|value:value|description:note" />

Lazy loading is a way to slowly load options as you scroll down the floating element that displays the available options. While this is extremely useful for delaying the loading of large amounts of options, there is two major caveat:

• The searchable attribute will not work to search for options that have not yet been loaded.
• The lazy attribute expects to receive values greater than or equal to 10.

<x-select.styled :options="[
    ['label' => 'PHP', 'value' => 1],
    ['label' => 'JavaScript', 'value' => 2],
    ['label' => 'Python', 'value' => 3],
    ['label' => 'Java', 'value' => 4],
    ['label' => 'C#', 'value' => 5],
    ['label' => 'C++', 'value' => 6],
    ['label' => 'Ruby', 'value' => 7],
    ['label' => 'Swift', 'value' => 8],
    ['label' => 'Kotlin', 'value' => 9],
    ['label' => 'Go', 'value' => 10],
    ['label' => 'TypeScript', 'value' => 11],
    ['label' => 'C', 'value' => 12],
    ['label' => 'Objective-C', 'value' => 13],
    ['label' => 'R', 'value' => 14],
    ['label' => 'Perl', 'value' => 15],
    ['label' => 'Scala', 'value' => 16],
    ['label' => 'Haskell', 'value' => 17],
    ['label' => 'Lua', 'value' => 18],
    ['label' => 'Rust', 'value' => 19],
    ['label' => 'Dart', 'value' => 20],
    ['label' => 'Assembly', 'value' => 21],
    ['label' => 'SQL', 'value' => 22],
    ['label' => 'NoSQL', 'value' => 23],
    ['label' => 'HTML', 'value' => 24],
    ['label' => 'CSS', 'value' => 25],
    ['label' => 'Bash', 'value' => 26],
    ['label' => 'PowerShell', 'value' => 27],
    ['label' => 'Groovy', 'value' => 28],
    ['label' => 'Visual Basic', 'value' => 29],
    ['label' => 'Fortran', 'value' => 30],
]" lazy="10" />

<x-select.styled :request="route('api.users')" />

When the value and label do not come from the label and value positions respectively, you must specify this manually using the select attribute, like mentioned in the multi-dimensional array section. This example do not set the select attribute because the API returns the values in the correct format.

The styled select component filters the API results using internal logic to search for the desired option based on the term entered in the input only in the item's label or description . You can disable this behavior to make the filters apply only in the API. In other words, you need to ensure that, for example, the value search applies a where based on the term sent in the search and appended to the query string search .

<x-select.styled :request="route('api.users')" unfiltered />

In this example, the query was builded as follows:

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
use Illuminate\Database\Eloquent\Builder;
 
Route::get('/users', function (Request $request) {
    $search = $request->get('search');
 
    return User::query()
        ->when($search, fn (Builder $query) => $query->where('name', 'like', "%{$search}%"))
        ->unless($search, fn (Builder $query) => $query->limit(10))
        ->get()
        ->map(fn (User $user): array => [
            'label' => $user->name,
            'value' => $user->id,
        ]);
})->name('api.users');

Which means:

• When search is set, then the query will be filtered by the name column.
• When search is not set, then the query will return only 10 results.

Optionally, you can set the unfiltered globally by the TallStackUI configuration file.

You have the possibility to customize some things related to the request, such as the method used: get or post , and also add more params to the request. One of the big advantages of using these advanced options is the params parameter, because it is hydrated. This means that if you are using this component within the Livewire components and create a variable to be used in params , when making any changes to this variable and Livewire hydrates the page, the next time the select is opened to make a new request, params will be updated in the request.

<x-select.styled :request="[
                    'url' => route('api.users'),
                    'method' => 'get',
                    'params' => ['library' => 'TallStackUi'],
                 ]" />