Search bar
An input-group with the icon in an addon and the submit inside the group.
role="search" on the form tells assistive tech what the group is for, and
autocomplete="off" keeps the browser's own history out of the way.
<form role="search" class="input-group" style="max-inline-size: 28rem">
<span class="input-addon">
<svg
class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
</span>
<input type="search" class="input" name="q" placeholder="Search" autocomplete="off" />
<button class="button" type="submit">Search</button>
</form>
Search with filters
The query on its own row, then filters in a cluster. A type="reset" button
clears the form natively, no script.
<form role="search" class="stack is-snug" style="max-inline-size: 28rem">
<div class="input-group">
<span class="input-addon">
<svg
class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
</span>
<input
type="search"
class="input"
name="q"
placeholder="Search products"
autocomplete="off"
/>
</div>
<div class="cluster is-tight">
<label class="cluster is-tight text--1">
<span>Category</span>
<select class="input is-sm" name="category">
<option>All</option>
<option>Electronics</option>
<option>Books</option>
<option>Home</option>
</select>
</label>
<label class="cluster is-tight text--1">
<span>Sort by</span>
<select class="input is-sm" name="sort">
<option>Most relevant</option>
<option>Newest</option>
<option>Price: low to high</option>
<option>Price: high to low</option>
</select>
</label>
<button class="button is-ghost is-sm" type="reset">Clear filters</button>
</div>
</form>
Results header
The filter, the count, and the sort sit in one row above the results, next to the list they change.
42 results
<div class="cluster is-tight">
<form role="search" class="input-group" style="flex: 1">
<span class="input-addon">
<svg
class="icon"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
aria-hidden="true"
>
<circle cx="11" cy="11" r="8" />
<path d="m21 21-4.3-4.3" />
</svg>
</span>
<input
type="search"
class="input"
name="q"
placeholder="Filter results"
autocomplete="off"
/>
</form>
<p class="text-muted text--1"><strong>42</strong> results</p>
<label class="cluster is-tight text--1">
<span>Sort</span>
<select class="input is-sm" name="sort">
<option>Newest</option>
<option>Oldest</option>
<option>A-Z</option>
</select>
</label>
</div>