Search
Search fields for every place
Default
⌘K
Code
<div class="field">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input id="sr-1" name="sr-1" type="search" placeholder="Search">
<kbd>⌘K</kbd>
</div>With a filter
Code
<div class="d-flex align-items-center gap-2">
<div class="field">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input id="sr-2" name="sr-2" type="search" placeholder="Search orders">
</div>
<select id="sr-3" name="sr-3" class="form-select" aria-label="Status">
<option value="All">All</option>
<option value="Paid">Paid</option>
<option value="Pending">Pending</option>
</select>
</div>Large
Code
<div class="field">
<svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg>
<input id="sr-4" name="sr-4" type="search" placeholder="What are you looking for?">
</div>