Filters & Search

Filter and faceted search blocks for building product filtering interfaces with dropdowns, modals, drawers, and toggle panels.

Default Filter Dropdown

Category
Price

Blade code

<x-fwb.blocks.application.filter />

Filter Dropdown with Custom Props

Filter Options
Clear all
Category
Price

Blade code

<x-fwb.blocks.application.filter
    title="Filter Options"
    id="customFilter"
    action="/reset-filters"
    submitText="Apply"
    resetText="Clear all" />

Default Faceted Search Modal

Blade code

<x-fwb.blocks.application.faceted-search-modal />

Faceted Search Modal with Custom Content

Blade code

<x-fwb.blocks.application.faceted-search-modal
    title="Advanced Filters"
    id="advanced-filter-modal">
    <div class="space-y-4">
        <h4 class="text-sm font-medium text-gray-900 dark:text-white">Status</h4>
        <div class="flex items-center">
            <input id="status-active" type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-blue-600 focus:ring-blue-500">
            <label for="status-active" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Active</label>
        </div>
        <div class="flex items-center">
            <input id="status-inactive" type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-blue-600 focus:ring-blue-500">
            <label for="status-inactive" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Inactive</label>
        </div>
    </div>
</x-fwb.blocks.application.faceted-search-modal>

Default Faceted Search Toggle Panel

Blade code

<x-fwb.blocks.application.faceted-search-toggle />

Faceted Search Toggle with Custom Content

Refine Results

Blade code

<x-fwb.blocks.application.faceted-search-toggle title="Refine Results">
    <div class="grid gap-4 sm:grid-cols-2 pb-4">
        <div>
            <h3 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">Status</h3>
            <label class="flex items-center justify-between cursor-pointer">
                <span class="text-sm font-medium text-gray-900 dark:text-gray-300">Published</span>
                <div class="relative">
                    <input type="checkbox" class="sr-only peer">
                    <div class="w-9 h-5 bg-gray-200 rounded-full peer peer-checked:bg-blue-600 after:content-[''] after:absolute after:top-[2px] after:start-[2px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all peer-checked:after:translate-x-full"></div>
                </div>
            </label>
        </div>
    </div>
</x-fwb.blocks.application.faceted-search-toggle>

Default Faceted Search Drawer

Blade code

<x-fwb.blocks.application.faceted-search-drawer />

Faceted Search Drawer with Custom Content

Filter Products
Brand

Blade code

<x-fwb.blocks.application.faceted-search-drawer
    title="Filter Products"
    id="product-filter-drawer">
    <div class="space-y-6">
        <div>
            <h6 class="mb-3 text-sm font-medium text-gray-900 dark:text-white">Brand</h6>
            <ul class="space-y-2">
                <li class="flex items-center">
                    <input id="brand-apple" type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-blue-600 focus:ring-blue-500">
                    <label for="brand-apple" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Apple</label>
                </li>
                <li class="flex items-center">
                    <input id="brand-samsung" type="checkbox" class="w-4 h-4 bg-gray-100 border-gray-300 rounded text-blue-600 focus:ring-blue-500">
                    <label for="brand-samsung" class="ms-2 text-sm font-medium text-gray-900 dark:text-gray-300">Samsung</label>
                </li>
            </ul>
        </div>
    </div>
</x-fwb.blocks.application.faceted-search-drawer>

Component Properties

Filter x-fwb.blocks.application.filter

PropTypeDefaultDescription
title string Filters The heading displayed at the top of the filter panel.
id string filterDropdown The HTML id attribute for the filter container.
action string # URL for the reset action link.
submitText string Apply filters Label for the submit button.
resetText string Reset Label for the reset link.
headerActions slot - Custom actions in the header area replacing the reset link.
slot slot - Custom filter content replacing the default checkboxes and radio buttons.

Faceted Search Modal x-fwb.blocks.application.faceted-search-modal

PropTypeDefaultDescription
title string Filter by The modal heading.
id string filter-modal The HTML id for the modal element.
footer slot - Custom footer replacing the default Show results/Reset buttons.
slot slot - Filter content inside the modal body.

Faceted Search Toggle x-fwb.blocks.application.faceted-search-toggle

PropTypeDefaultDescription
title string Filter products The heading text shown above the toggle panel.
results slot - Content displayed below the filter toggles for search results.
slot slot - Filter toggle content inside the collapsible panel.

Faceted Search Drawer x-fwb.blocks.application.faceted-search-drawer

PropTypeDefaultDescription
title string Filter options The drawer heading text.
id string filter-drawer The HTML id for the drawer element.
footer slot - Custom footer replacing the default Apply filters/Reset buttons.
slot slot - Filter content inside the drawer body.