Skip to content

HTMX Search Forms: Design Full-Page and Fragment Responses Together

Keep an HTMX search usable through ordinary form submission while defining the HTML fragment, errors and focus behavior of its enhanced path.

GuideDeveloper tools

By

Updated 2 min read
HTMX Search Contracts: design illustration with IndieTools branding

An HTMX search should define both the ordinary page response and the smaller HTML response used for enhancement. The user's query and result meaning should remain the same whichever path handles the request.

The HTMX documentation explains that boosted native links and forms can retain ordinary navigation when JavaScript is unavailable. Other interactions, including active search, need deliberate fallback design. Adding an attribute alone does not establish that fallback.

Start with a submit-capable form

Give the search an action, a suitable method, a named input and a submit control. Decide whether the query belongs in a shareable URL and avoid exposing sensitive terms unnecessarily.

Submit the form before adding live updates. The returned page should contain the query, results or a clear no-results state, and a way to search again.

This provides a complete operation that the enhanced behavior can preserve.

Define the fragment boundary

Choose which region an enhanced response replaces. Keep the region's heading, result count and empty-state meaning coherent after replacement.

Cometflow Space describes a utility collection and has a declared HTMX association. The listing does not reveal its search implementation. A collection of utilities nevertheless offers a useful exercise: searching should replace the results without unexpectedly removing navigation or the query field.

Return a complete page for ordinary navigation and the intended fragment for the enhanced request. Do not expose a fragment-only URL as if it were a usable destination.

Keep validation outcomes aligned

A malformed or unsupported query should produce the same meaningful correction in both paths. Preserve the entered value so the user can revise it.

Decide how the enhanced interface displays server errors and network failures. Do not assume every non-success response will automatically appear inside the result region.

A loading indicator should end in success, a useful empty state or an explicit failure. Indefinite activity is not a substitute for error handling.

Review repeated input

Type one query, then change it before the first request finishes. Define which response is allowed to update the screen.

Use controlled response delays in a test environment to expose stale-result behavior. The visible query and displayed results should agree even when requests complete out of order.

Also consider request frequency. A live search should not send work for every incidental event when a considered trigger can serve the same task.

Preserve navigation and focus

After replacing results, keep focus where the interaction makes sense. An active search generally should not repeatedly pull focus away from the input.

Test keyboard submission, a pointer click and a no-script visit. Then copy the resulting URL into a new tab if the workflow promises shareable results.

The companion HTMX history guide covers the direct-navigation and browser-history contract.

Keep both response paths in regression checks when changing the result template. A partial update can look polished while the full page silently loses its heading or correction message.

The acceptance criterion is one understandable search operation with two delivery paths, not two subtly different applications that happen to share a query field.

More guide articles