AutoComplete

When the items — local or remote — name their fields differently, the select attribute remaps them instead of forcing a reshape at the source. Any part left out falls back to the key of the same name, and disabled is always read from disabled .

<!-- Format: value:key|description:key|image:key|metadata:key -->
 
<x-autocomplete label="User"
                :items="$users"
                select="value:name|description:email|image:avatar" />

Optionally, you can set the mapping globally through the TallStackUI configuration file

Without strict, wire:model accepts any typed value. With strict , the binding updates only after the user selects an item from the dropdown. If the current query does not match and the user leaves the field or presses Esc, the previous selection is restored. The field clears if there is no previous selection.

<x-autocomplete label="Status" strict :items="[
    ['value' => 'Pending'],
    ['value' => 'Approved'],
    ['value' => 'Rejected'],
]" />

Similar to the select.styled , the autocomplete can fetch items from a remote source:

<!-- Using a route as a string -->
<x-autocomplete label="User" request="/api/users" />
 
<!-- Using a Laravel route -->
<x-autocomplete label="User" :request="route('api.users')" />

The example below queries the same endpoint used by the styled select . It returns the user name under label , so select points the autocomplete value at it, while description and image already match:

<!--
The endpoint below returns the user name under "label", so "select" points
the autocomplete "value" at it. "description" and "image" already match.
-->
 
<x-autocomplete label="User"
                placeholder="Type a user name..."
                :request="route('api.users')"
                select="value:label"
                clearable />

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

Like select.styled , this component accepts a request array for custom requests. Set url , choose get or post as the method , and add params . The component hydrates params before each request to keep Livewire properties current.

<x-autocomplete label="User" :request="[
    'url' => route('api.users'),
    'method' => 'post',
    'params' => ['team_id' => 7],
]" />

Each item returned by the endpoint must match the :items structure. The value field is required, while description , image , and disabled are optional. Example:

use App\Models\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Route;
 
Route::get('/users', function (Request $request) {
    $search = $request->input('search');
 
    return User::query()
        ->when(! empty($search), fn ($query) => $query->where('name', 'like', "%{$search}%"))
        ->limit(10)
        ->get()
        ->map(fn (User $user): array => [
            'value' => $user->name,
            'description' => $user->email,
            'image' => $user->avatar,
        ]);
})->name('api.users');

<x-autocomplete label="User"
                placeholder="Type a user name..."
                :request="route('api.users')"
                select="value:label"
                indicator="spinner" />
 
<x-autocomplete label="User"
                placeholder="Type a user name..."
                :request="route('api.users')"
                select="value:label"
                indicator="spinner.bars" />

Type in the field to see the indicator. A bare spinner uses the globally configured spinner.type . spinner.{type} picks a specific spinner variant. Leaving it empty keeps the original icon. The inline attribute wins over the configuration file.