search input filter recent chips search input filter recent chips query search bar with recent searches search input with clear button
Search Base
Fetch pattern JSON:
curl https://webspire.de/patterns/search/base.json base.html
<div class="ws-search mx-auto max-w-lg">
<!-- Search input -->
<div class="relative">
<svg class="pointer-events-none absolute left-3 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z"/></svg>
<input type="search" placeholder="Search..." class="w-full rounded-xl border border-[var(--ws-search-border)] bg-[var(--ws-search-bg)] py-3 pl-10 pr-10 text-sm text-[var(--ws-search-text)] placeholder:text-[var(--ws-search-text-soft)] focus:border-[var(--ws-search-accent)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-search-accent)]/20" aria-label="Search">
<button type="button" class="absolute right-3 top-1/2 -translate-y-1/2 rounded-md p-0.5 text-[var(--ws-search-text-soft)] transition hover:text-[var(--ws-search-text)]" aria-label="Clear search">
<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"/></svg>
</button>
</div>
<!-- Recent searches -->
<div class="mt-4">
<p class="text-xs font-medium uppercase tracking-wider text-[var(--ws-search-text-soft)]">Recent searches</p>
<div class="mt-2 flex flex-wrap gap-2">
<span class="inline-flex items-center gap-1.5 rounded-full border border-[var(--ws-search-border)] bg-[var(--ws-search-bg)] px-3 py-1.5 text-sm text-[var(--ws-search-text)]">
<svg class="h-3.5 w-3.5 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Dashboard settings
</span>
<span class="inline-flex items-center gap-1.5 rounded-full border border-[var(--ws-search-border)] bg-[var(--ws-search-bg)] px-3 py-1.5 text-sm text-[var(--ws-search-text)]">
<svg class="h-3.5 w-3.5 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
API documentation
</span>
<span class="inline-flex items-center gap-1.5 rounded-full border border-[var(--ws-search-border)] bg-[var(--ws-search-bg)] px-3 py-1.5 text-sm text-[var(--ws-search-text)]">
<svg class="h-3.5 w-3.5 text-[var(--ws-search-text-soft)]" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"/></svg>
Billing
</span>
</div>
</div>
</div>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
searchinputfilterrecentchips
Slots
| Name | Required | Description |
|---|---|---|
| input | Yes | Search input field with icon. |
| recentSearches | No | Recent search term chips. |
Base search pattern with a magnifying glass icon input, clear button, and recent search chips. The chips show clock icons and previous search terms. Wire up to your search backend or client-side filter.