filter-popover
Single-choice facet in a popover; the trigger shows the current value, a pick closes it.
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,[popover] :is(a, button:not([popovertarget])). - Out of place, Smootify removes it from the page: also without a label attribute; 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.
Attributes on the element
- It reads
label,custom-label,selected-value,allow-reset,show-count,hide-parenthesis.
Loading
Its code loads only on pages that have filter-popover.