form filters search toolbar admin form filter bar search toolbar filters admin filter bar with search and selects horizontal admin filter form
Form Filter Bar
Fetch pattern JSON:
curl https://webspire.de/patterns/forms/filter-bar.json filter-bar.html
<section class="ws-forms bg-[var(--ws-forms-bg)]">
<div class="mx-auto max-w-6xl px-4 py-10 sm:px-6 lg:px-8">
<form class="rounded-2xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-bg)] p-4 shadow-sm">
<div class="grid gap-3 xl:grid-cols-[1.2fr_repeat(3,minmax(0,1fr))_auto]">
<div class="relative">
<svg class="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"/></svg>
<input type="search" aria-label="Search records" placeholder="Search projects, customers, owners..." class="w-full rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] py-2.5 pl-10 pr-4 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-2 focus:ring-[var(--ws-forms-input-focus)]/15" />
</div>
<div class="relative">
<select class="w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
<option>All status</option>
<option>Active</option>
<option>Paused</option>
<option>Archived</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
<div class="relative">
<select class="w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
<option>All owners</option>
<option>Maya</option>
<option>Jonas</option>
<option>Lina</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
<div class="relative">
<select class="w-full appearance-none rounded-xl border border-[var(--ws-forms-input-border)] bg-[var(--ws-forms-input-bg)] px-3 pr-10 py-2.5 text-sm text-[var(--ws-forms-text)] focus:border-[var(--ws-forms-input-focus)] focus:outline-none focus:ring-1 focus:ring-[var(--ws-forms-input-focus)]">
<option>Updated anytime</option>
<option>Last 24 hours</option>
<option>Last 7 days</option>
<option>Last 30 days</option>
</select>
<div class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-3">
<svg class="h-4 w-4 text-[var(--ws-forms-label)]" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5"/></svg>
</div>
</div>
<div class="flex gap-2">
<button type="reset" class="rounded-xl border border-[var(--ws-forms-input-border)] px-4 py-2.5 text-sm font-medium text-[var(--ws-forms-text)]">Reset</button>
<button type="submit" class="rounded-xl bg-[var(--ws-forms-action-bg)] px-4 py-2.5 text-sm font-semibold text-[var(--ws-forms-action-text)]">Apply</button>
</div>
</div>
</form>
</div>
</section>
Details
Responsive Dark Mode Tailwind Only SSR Safe Copy & Paste
Stable Published
formfilterssearchtoolbaradmin
Slots
| Name | Required | Description |
|---|---|---|
| search | Yes | Primary query field. |
| filters | Yes | Horizontal filter controls for status, owner, date, or similar dimensions. |
| actions | Yes | Reset and apply actions. |
Toolbar-style filtering form for app surfaces. Keeps search and structured filters in one horizontal control row instead of breaking them into a full section.