filter-search
Free-text query of the block; typing or submitting sets the search query, also in a collection (data-collection).
At a glance
filter-checkbox
Checkboxes
- Built with
- A Form Block with one Checkbox.
- Label
label="Color"- Picks
- Several values.
filter-list
Radio buttons
- Built with
- A Form Block with one Radio button.
- Label
label="Size"- Picks
- One value.
filter-select
The browser's own select
- Built with
- A Form Block with a Select field.
- Label
label="Material"- Picks
- One value.
filter-dropdown
A Webflow Dropdown
- Built with
- A Form Block and a Webflow Dropdown.
- Label
label="Material"- Picks
- One value.
filter-popover
A panel over the page
- Built with
- A Form Block and a popover with links or buttons.
- Label
label="Material"- Picks
- One value.
filter-swatches
Color or image buttons
- Built with
- A Form Block and one Custom element with the tag
button. - Label
label="Color"- Picks
- One value, or several with
multiple="true".
filter-price
A price range
- Built with
- A Form Block with two number fields and two sliders.
- Label
- None: it reads no label.
- Picks
- A price range.
filter-search
A search field
- Built with
- A Form Block with a Text field.
- Label
- None: it reads no label.
- Picks
- Words to search.
More in the guide.
Where it can go
- Inside
smootify-search-discovery. - Must contain
form. - Out of place, Smootify removes it from the page: data-expand panels count as inside.
What it requires
- The Search & discovery extension (lite or server plan, or the extension activated in the Smootify dashboard). Without it, the element does nothing.
Fields in the form
Each field’s Name setting in Webflow tells Smootify what the field holds. It is a setting of the field, not a custom attribute.
| Name | Field | What it does |
|---|---|---|
| every input but the submit (any name) | Text field | Renamed query; the first one sets the search & discovery query. |
Loading
Its code loads only on pages that have filter-search.