---
title: Toolbar Filter Bar
description: Standard admin-list toolbar combining search input, filter selects, and bulk action buttons.
visibility: guest
draft: false
---

# Toolbar Filter Bar

Every admin list page needs the same composition: search on the left, filter dropdowns in the middle, action buttons on the right. The `<x-wirekit::toolbar>` primitive owns the responsive layout; you fill the slots with whatever inputs the page needs.

## Recipe

:::preview{title="Admin list toolbar"}
<x-wirekit::toolbar aria-label="Product list filters">
    <x-wirekit::row gap="sm" align="center" style="flex: 1; max-width: 28rem">
        <x-wirekit::input name="search" type="search" placeholder="Search products..." size="sm" aria-label="Search products" />
    </x-wirekit::row>
    <x-wirekit::row gap="sm" align="center">
        <x-wirekit::select name="status" size="sm" aria-label="Filter by status">
            <option value="">All status</option>
            <option value="active">Active</option>
            <option value="archived">Archived</option>
        </x-wirekit::select>
        <x-wirekit::select name="category" size="sm" aria-label="Filter by category">
            <option value="">All categories</option>
            <option value="apparel">Apparel</option>
            <option value="accessories">Accessories</option>
        </x-wirekit::select>
        <x-wirekit::button size="sm">+ Add Product</x-wirekit::button>
    </x-wirekit::row>
</x-wirekit::toolbar>
:::

:::source{language="blade"}
<x-wirekit::toolbar aria-label="Product list filters">
    <x-wirekit::row gap="sm" align="center" style="flex: 1; max-width: 28rem">
        <x-wirekit::input
            name="search"
            type="search"
            placeholder="Search products..."
            size="sm"
            aria-label="Search products"
            wire:model.live.debounce.300ms="search"
        />
    </x-wirekit::row>
    <x-wirekit::row gap="sm" align="center">
        <x-wirekit::select name="status" size="sm" aria-label="Filter by status" wire:model.live="status">
            <option value="">All status</option>
            <option value="active">Active</option>
            <option value="archived">Archived</option>
        </x-wirekit::select>
        <x-wirekit::select name="category" size="sm" aria-label="Filter by category" wire:model.live="category">
            <option value="">All categories</option>
            @foreach($categories as $category)
                <option value="{{ $category->slug }}">{{ $category->name }}</option>
            @endforeach
        </x-wirekit::select>
        <x-wirekit::button size="sm" wire:click="$dispatch('open-add-product')">
            + Add Product
        </x-wirekit::button>
    </x-wirekit::row>
</x-wirekit::toolbar>
:::

## Variations

- **Bulk-action toolbar:** When rows are selected, swap the right-side button for `<x-wirekit::row>` with bulk actions (Archive selected, Delete, Export). Use `x-show="selectedCount > 0"` to toggle.
- **Tabbed list:** Add `<x-wirekit::tabs>` above the toolbar for status views (Open/Pending/Solved); the toolbar's filter selects then narrow within the active tab.
- **Density:** Pass `density="compact"` to `<x-wirekit::toolbar>` for reduced vertical padding when stacked above a dense data table.

## Components Used

- [Toolbar](/components/toolbar) — `aria-label`, `density`, `align` props
- [Row](/components/row) — flex grouping inside the toolbar
- [Input](/components/input) — search field with `wire:model.live.debounce`
- [Select](/components/select) — filter dropdowns
- [Button](/components/button) — primary action

## See Also

- [Toolbar component docs](/components/toolbar)