Overview
The Search Form component provides a simple, ready-to-use search form with a text input field. It extends the Form component and automatically uses GET method with query parameters.
Basic Usage
<x-forms::search-form
route="users.index"
/>
Component Attributes
The name attribute for the search input field
The form action URL (overrides route)
The route name to submit the form to
Additional route parameters
Placeholder text for the search input (defaults to translation)
Icon to display (uses framework default search icon if not specified)
The model to bind values from (defaults to request query parameters)
Whether the form will upload files
Override the default CSS framework
Template Structure
The search form component renders a simple form with a text input:
<x-forms::form :action="$action ?: route($route, $params)"
class="search"
:method="$method"
:framework="$framework"
:files="$files">
<x-forms::text
:name="$name"
:placeholder="$placeholder ?: trans('forms::strings.search_form_placeholder')"
:show-label="false"
:framework="$framework"
/>
</x-forms::form>
Default Behavior
Auto Model Binding
If no model is provided, the search form automatically binds to the request query parameters:
if (! $model) {
$model = request()->query();
}
Framework Icons
The component uses framework-specific search icons:
Bootstrap 5:
'search-icon' => 'fa-search' // Font Awesome
'search-icon' => 'zmdi-search' // Material Design Icons
Usage Examples
Basic Search
<x-forms::search-form
route="products.index"
/>
Custom Placeholder
<x-forms::search-form
route="users.index"
placeholder="Search users by name or email..."
/>
Search with Route Parameters
<x-forms::search-form
route="category.products"
:params="['category' => $category->id]"
/>
Custom Field Name
<x-forms::search-form
route="orders.index"
name="query"
placeholder="Search orders..."
/>
Using Action URL Instead of Route
<x-forms::search-form
action="/admin/search"
name="q"
/>
Controller Integration
Handle the search in your controller:
public function index(Request $request)
{
$query = User::query();
if ($search = $request->input('search')) {
$query->where(function($q) use ($search) {
$q->where('name', 'like', "%{$search}%")
->orWhere('email', 'like', "%{$search}%");
});
}
$users = $query->paginate(20);
return view('users.index', compact('users'));
}
Complete Example with Filters
<div class="mb-4">
<x-forms::search-form
route="products.index"
placeholder="Search products..."
/>
</div>
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Price</th>
<th>Stock</th>
</tr>
</thead>
<tbody>
@forelse($products as $product)
<tr>
<td>{{ $product->name }}</td>
<td>{{ $product->price }}</td>
<td>{{ $product->stock }}</td>
</tr>
@empty
<tr>
<td colspan="3">No products found</td>
</tr>
@endforelse
</tbody>
</table>
</div>
{{ $products->links('forms::bootstrap-5.pagination') }}
Styling
The search form has a search CSS class that you can target:
form.search {
max-width: 500px;
}
form.search input {
border-radius: 20px;
}
Translation
The default placeholder uses the translation key:
forms::strings.search_form_placeholder