Skip to main content

Search Field

Rounded search input with magnifying glass icon — Apple's filled search bar style.

Selectors

.search-field
Wrapper that provides the magnifying glass icon and positions children.
.search-clear
Optional clear button inside the field.

Default

HTML 
<div class="search-field">
  <input type="search" placeholder="Search" />
</div>

With Clear Button

HTML 
<div class="search-field">
  <input type="search" placeholder="Search" value="Photos" />
  <button type="button" class="search-clear" aria-label="Clear search">
    <svg viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M3 9l6-6M9 9L3 3"/></svg>
  </button>
</div>

Disabled

HTML 
<div class="search-field">
  <input type="search" placeholder="Search" disabled />
</div>

In Toolbar

HTML 
<div class="toolbar">
  <div class="search-field" style="flex: 1; max-width: 320px;">
    <input type="search" placeholder="Search settings…" />
  </div>
  <div class="toolbar-spacer"></div>
  <button class="btn-plain size-11 p-0" data-tooltip="Filter" aria-label="Filter">
    <svg class="size-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true"><path d="M22 3H2l8 9.46V19l4 2v-8.54L22 3z"/></svg>
  </button>
</div>