Search form
A search box: a magnifying glass icon, a clear button that appears as you type, a keyboard shortcut and an optional attached Search button. Used as a GET form that reloads the page or as a live search with Livewire.
Basic search
When you type in the field, a clear (×) button appears on the right; Esc also clears the field. class goes to the outer box (to set the width); other attributes (name, value, placeholder, autofocus…) are added to the field. Without a visible label, placeholder becomes the field's name for screen readers.
<acun:search name="q" placeholder="Search by customer, order no. or email" />| Prop | Values |
|---|---|
clearable | false: turns off the clear button and Esc |
Search form that reloads the page
When action is given, the component becomes a <form role="search">: Enter or the Search button added with button sends the search text to that URL with GET; the text stays in the URL as ?q= and the link can be shared. To keep other query parameters, write hidden fields inside the component; they are placed inside the form.
<acun:search name="q" :value="request('q')" :action="route('customers.index')" button="Search" placeholder="Search customers">
<input type="hidden" name="status" value="{{ request('status') }}">
</acun:search>| Prop | Values |
|---|---|
action | URL the form is submitted to |
method | GET (default) or POST; @csrf is added for POST |
button | Text of the attached submit button |
Keyboard shortcut
Pressing the shortcut key anywhere on the page focuses the field; it does not fire while typing in another field or when pressed with Ctrl/⌘. While the field is empty and not focused, a hint for the key appears on the right.
<acun:search name="q" shortcut="/" placeholder="Search the menu" />| Prop | Values |
|---|---|
shortcut | Key that focuses the field, for example "/" |
Large size
size="lg" gives a larger, 48-pixel-high field for a page's main search (for example, a help center).
<acun:search name="question" size="lg" button="Search" placeholder="E.g. return policy, downloading invoices" />| Prop | Values |
|---|---|
size | md (40 px, default) or lg (48 px) |
Live search with Livewire
With wire:model.live, results arrive as you type; while a request is running, a spinner replaces the magnifying glass (only for requests of this property). If the server changes the value (for example, with a "Clear" button), the clear button and the shortcut hint update on their own.
<acun:search wire:model.live.debounce.300ms="search" shortcut="/" placeholder="Search customers" />| Prop | Values |
|---|---|
wire:model | The bound Livewire property; the field's id also comes from it |
Search form with filters
When you use it inside a form with other fields, do not give action (forms cannot be nested) and use the form's own submit button. label puts a visible label above the field.
<form wire:submit="search" class="grid items-end gap-4 md:grid-cols-[minmax(0,2fr)_minmax(0,1fr)_auto]">
<acun:search wire:model="term" label="Search term" placeholder="Name, phone or address" />
<acun:select wire:model="status" label="Status" :options="['' => 'All statuses', 'pending' => 'Pending', 'approved' => 'Approved']" />
<acun:button type="submit">Search</acun:button>
</form>| Prop | Values |
|---|---|
label | Visible label above the field |
Props and slots
The values the component accepts.
| Prop | Default | Description |
|---|---|---|
name | null | Field name (the query parameter in a GET form) |
placeholder | Search | Placeholder; without a visible label, the field's accessible name |
label | null | Visible label above the field |
action | null | If given, the component becomes a <form role="search">; otherwise a <div role="search"> |
method | GET | GET or POST (@csrf is added for POST) |
button | null | Text of the attached submit button |
shortcut | null | Key that focuses the field, for example "/" |
clearable | true | Clear (×) button and clearing with Esc |
size | md | md (40 px) or lg (48 px) |
class | — | Added to the outer box; other attributes go to the field |