Multi-Component Coordination

How it works

• Shared State: All components (Tabs, Search, Pagination) read from and write to a shared ProductSearchState.
• hx-include: Requests include the current state using hx-include="#product-search-state".
• Partial Updates: Each interaction updates the #multi-component-demo container, ensuring all components reflect the new state (e.g., changing tabs resets the page).

Code Example

<!-- Search includes current Tab -->
<input type="search" placeholder="Search..."
       name="search"
       hx-post="/demo/lab/update-grid"
       hx-trigger="keyup changed delay:500ms"
       hx-target="#multi-component-demo"
       hx-include="#product-search-state" />

<!-- Tabs include current Search -->
<button name="tab" value="electronics"
        hx-post="/demo/lab/update-grid"
        hx-target="#multi-component-demo"
        hx-include="#product-search-state">
    Electronics
</button>