Skip to main content
WireKit

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

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"
            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 — aria-label, density, align props
  • Row — flex grouping inside the toolbar
  • Input — search field with wire:model.live.debounce
  • Select — filter dropdowns
  • Button — primary action

See Also