Toggle filters

What you're building: one switch that narrows the listing while it is on, and clears itself when it is off.

Use it for a field that is either true or false: in stock, remote, featured, on sale. Everything else is a checkbox or a radio filter.

What you need

Applies toA Div inside the browse wrapper
The group.
Applies toThe group
Renders as a single switch rather than a value list.
Applies toThe group
Which field to filter on while the switch is on.

There is no filter-template and no . A toggle never reads values back from Algolia, because it already knows both of them.

Build it

Put a Webflow Checkbox inside the group. Style it as a switch if you like: the script only cares that there is an <input type="checkbox"> somewhere inside.

<div wf-algolia-element="filter-group" wf-algolia-type="toggle" wf-algolia-field="in_stock">
  <label>
    <input type="checkbox" />
    <span>In stock only</span>
  </label>
</div>

On applies in_stock:true. Off removes it entirely, so the listing goes back to everything. There is no third state.

Replaces the two-radio workaround

Before this, a boolean field needed a radio group with a "Yes" option and an "All" option, which read as two choices for what is really one. If you have that markup, it still works. A toggle is fewer elements and clearer to the visitor.

Filtering on something other than `true`

sets what the switch applies when it is on. It defaults to true, which is what a Webflow Switch field syncs as.

<div
  wf-algolia-element="filter-group"
  wf-algolia-type="toggle"
  wf-algolia-field="availability"
  wf-algolia-value="in_stock"
>
  <input type="checkbox" />
</div>

The value is matched literally, exactly as Algolia stores it. A field indexed as the string "true" and one indexed as the boolean true both work, but a field indexed as "Yes" needs .

Applying on a button instead of instantly

A toggle honours like every other group. The switch stages its change, the group is marked data-wf-algolia-staged, and nothing runs until the visitor presses your wf-algolia-button="apply" element. See Deferred apply.

Chips and shareable URLs

A toggle behaves like any other selection:

It renders a filter chip, labelled with the raw value (true) unless you set a on the chip's text element. For a toggle, something like In stock reads far better than true.
With on the browse wrapper it writes ?f_in_stock=true. Opening that link applies the filter and the switch opens in its on position.
Clearing the filter from somewhere else moves the switch back. Removing its chip, pressing your wf-algolia-button="reset" element, or clearing the field through the public API all turn the switch off.

The switch and the filter state are two views of one thing, in both directions. Whichever one the visitor touches, the other follows.

Troubleshooting

Symptom	Cause	Fix
Nothing happens, console names the group	No `<input type="checkbox">` inside the group	Add a Webflow Checkbox inside it
The switch does nothing, no console message	The group has no `wf-algolia-field`	Add it
Everything disappears when switched on	The field is not in `attributesForFaceting`	Add it in Algolia → Configuration → Facets
Everything disappears when switched on	The stored value is not `true`	Set `wf-algolia-value` to what Algolia actually holds
The chip says `true`	The chip renders the raw value	Put `wf-algolia-text-template` on the chip's text element
The switch does not move on a shared URL	Script older than 1.1.0	Update to `@candid-leap/wf-algolia@1`

What you need​

Build it​

Filtering on something other than true​

Applying on a button instead of instantly​

Chips and shareable URLs​

Troubleshooting​

Related​