Laravel Autocomplete Component
Free · MITSearchable input field with dropdown suggestions, supporting both static options and Livewire server-side search.
A Autocomplete built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4.
Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag:
<x-aura::autocomplete>
Installation
composer require bluestarsystem/aura-uiUsage
<x-aura::autocomplete
label="Country"
name="country"
:options="['Italy', 'Germany', 'France', 'Spain', 'Portugal']"
placeholder="Search for a country..."
/>See the full API, props and live examples in the Autocomplete documentation.
Overview
The Autocomplete component provides a text input with a dynamic dropdown of filtered suggestions. It supports both static option arrays and server-side search via Livewire integration. As the user types, matching results appear in a dropdown, allowing quick selection. Built with Alpine.js for instant client-side filtering and optional debounced server-side requests.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
label |
string |
'' |
Label text displayed above the input. |
name |
string |
'' |
The input name attribute, also used for wire:model. |
options |
array |
[] |
Array of options. Each item can be a string or ['value' => ..., 'label' => ...]. |
placeholder |
string |
'' |
Placeholder text shown when the input is empty. |
minChars |
int |
1 |
Minimum characters required before showing suggestions. |
error |
string|null |
null |
Validation error message to display below the input. |
Slots
| Slot | Description |
|---|---|
| default | Not used. Options are passed via the options prop. |
The dropdown list is rendered automatically based on the options prop. Each option displays the label (or string value) and submits the corresponding value when selected.
See more examples and every variant in the Autocomplete documentation.