Search Input

A search field that filters the catalog live as the customer types, or submits to a dedicated search-results page.

Last updated

August 14, 2026

How to use

Place the field in your nav or above the catalog it should drive.
Configure Behavior — turn on Real Time for live-as-you-type filtering, and/or turn on Page so pressing Enter sends the query to a dedicated search-results page. Turn on both for live filtering plus an Enter fallback to a full results page, or just one depending on your setup.
Style the field with Text (typography, placeholder) and Styles (background, border, padding, radius, per-state colors).
Configure Search Icon and Clear to match your design.

Real Time filtering vs. Page navigation

These are two independent settings under Behavior, not an either/or choice — use one or both together:

Setting	What it does
`Real Time` (+ `Delay`)	Filters the connected Catalog Display live as the customer types, waiting `Delay` milliseconds after the last keystroke before applying the query.
`Page` (+ `Slug`)	Makes pressing Enter navigate to your dedicated search-results page at `Slug`, carrying the query in the URL.

With Real Time off, typing doesn't filter anything until the customer presses Enter. Enter submits the query in place — or, when Page is on, navigates to your results page instead. Pressing Escape always clears the field.

Styling the field's states

Under Styles, the field's background covers Default, Hover, Focus, and Disabled — each with its own BG and Border, and Focus also adding Shadow and Transition. Border fields use Framer's native extended border control.

The Disabled style isn't used by anything yet — safe to skip.

Search and filters share the URL

Query and filters compose — a customer can search and filter at the same time, and both are written to the URL, so the exact view (search term + active filters) is a shareable link. Result Counter and Search Button read the same shared search state and react to it automatically.