Skip to main content

Checkbox filters

What you're building: a list of tickable values for one facet — pick any number of categories, brands or tags.

The default filter shape, and the right one whenever selecting two values should widen the result set rather than replace the first.

What you need​

  • Applies toA Div inside the browse wrapper

    The group.

  • Applies toThe group

    Which facet to filter on.

  • Applies toThe group

    The control style.

  • Applies toOne option inside the group

    Cloned per facet value.

Build it​

Design one option — a checkbox, a label, optionally a count — and mark it filter-template. Inside it:

  • — the value name
  • — how many results have it
<div wf-algolia-element="filter-group" wf-algolia-field="category" wf-algolia-type="checkbox">
  <label wf-algolia-element="filter-template">
    <input type="checkbox" />
    <span wf-algolia-element="filter-value-text"></span>
    <span wf-algolia-element="filter-count"></span>
  </label>
</div>

Combining selections​

decides what two ticks mean:

  • or (default) — results matching either
  • and — only results matching both

or suits categories, where people are widening. and suits tags, where each tick should narrow.

and on a single-value field returns nothing

If a product has exactly one category, asking for results in both Shoes and Hats returns an empty list — correctly, but confusingly. Use and only on fields that hold several values per record.

Long lists​

caps the visible values, with and labelling the toggle. Hidden values take the class from data-hideclass.

Use so a ticked value near the bottom does not scroll out of view when results re-render.

Troubleshooting​

SymptomCauseFix
No options renderThe facet is not declared in AlgoliaConfiguration → Facets
Ticking two returns nothingmatch="and" on a single-value fieldUse or
Selections jump aroundValues re-sort by count on each renderwf-algolia-sort="selected-first"
Counts show but never changeThe group is outside the browse wrapperMove it inside